国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

VUE組件化開發(fā)的精髓

e10101 / 2357人閱讀

摘要：開篇的簡單介紹和演示的開發(fā)精髓組件組件的三個(gè)組件之間的通信方式實(shí)例講解銖寶益幫助中心前端組件開篇的簡單介紹和演示發(fā)布于年，是一個(gè)漸進(jìn)式的框架，同時(shí)也是一個(gè)輕量級的框架，它只關(guān)心數(shù)據(jù)，從而讓開發(fā)者不用過多的關(guān)注的改變和操作，的作者為尤雨溪，

開篇：vue.js的簡單介紹和演示

vue的開發(fā)精髓-組件

vue組件的三個(gè)API：prop、event、slot

組件之間的通信方式

實(shí)例講解：銖寶益幫助中心前端組件

開篇：vue.js的簡單介紹和演示

vue發(fā)布于2013年，是一個(gè)漸進(jìn)式的框架， 同時(shí)也是一個(gè)輕量級的框架，它只關(guān)心數(shù)據(jù)，從而讓開發(fā)者不用過多的關(guān)注DOM的改變和操作DOM，vue的作者為Evan You（尤雨溪），任職于Google Creative Lab

DOM：document object model（文檔對象模型）也就是操作html或xml的通用編程接口，這里不過度描述
雙向綁定代碼演示
// html

    
"app">
        type="text" v-model="note">
        
{{ note }}

    



// js
var app = new Vue({
    el: "#app",
    data: {
        note: ""
    }
})

對比其它web前端框架，vue更容易上手，代碼和API更為簡潔和直觀，且速度更快！

vue的開發(fā)精髓-組件 
vue最精髓的，正是它的組件與組件化,寫一個(gè) Vue 工程，其實(shí)就是在寫一個(gè)個(gè)的組件。
vue組件的分類（三大類）

    由 ==vue-router產(chǎn)生的每個(gè)頁面==，它本質(zhì)上也是一個(gè)組件（.vue），主要承載當(dāng)前頁面的 HTML 結(jié)構(gòu)，會包含數(shù)據(jù)獲取、數(shù)據(jù)整理、數(shù)據(jù)可視化等常規(guī)業(yè)務(wù)。整個(gè)文件相對較大，因?yàn)樗鳛槁酚傻匿秩荆粫粡?fù)用，因此也不會對外提供接口；在項(xiàng)目開發(fā)中，我們寫的大部分代碼都是這類的組件（頁面），協(xié)同開發(fā)時(shí)，每人維護(hù)自己的頁面，很少有交集。這類組件相對是最好寫的，因?yàn)橹饕沁€原設(shè)計(jì)稿，完成需求，不需要太多模塊和架構(gòu)設(shè)計(jì)上的考慮；

    不包含業(yè)務(wù)，獨(dú)立、具體功能的==基礎(chǔ)組件==，比如日期選擇器、模態(tài)框等。這類組件作為項(xiàng)目的基礎(chǔ)控件，會被大量使用，因此組件的 API 進(jìn)行過高強(qiáng)度的抽象，可以通過不同配置實(shí)現(xiàn)不同的功能；

    ==業(yè)務(wù)組件==。它不像第二類獨(dú)立組件只包含某個(gè)功能，而是在業(yè)務(wù)中被多個(gè)頁面復(fù)用的，它與獨(dú)立組件的區(qū)別是，業(yè)務(wù)組件只在當(dāng)前項(xiàng)目中會用到，不具有通用性，而且會包含一些業(yè)務(wù)，比如數(shù)據(jù)請求；而獨(dú)立組件不含業(yè)務(wù)，在任何項(xiàng)目中都可以使用，功能單一，比如一個(gè)具有自定義數(shù)據(jù)校驗(yàn)功能的輸入框。

vue組件的三個(gè)API：prop、event、slot

一個(gè)組件的復(fù)雜與否，都是由三部分組成的，==prop（屬性）==，==event（事件）==，==slot（插槽）==，必須要先設(shè)計(jì)好這三部分，才能繼續(xù)開發(fā)組件，否則，代碼一旦發(fā)布，后面再修改API就很困難了，組件的維護(hù)都是以新增功能為主，而不是經(jīng)常變更接口；

prop（屬性）

prop 定義了這個(gè)組件有哪些可配置的屬性，組件的核心功能也都是它來確定的。寫通用組件時(shí)，props 最好用對象的寫法，這樣可以針對每個(gè)屬性設(shè)置類型、默認(rèn)值或自定義校驗(yàn)屬性的值，這點(diǎn)在組件開發(fā)中很重要，然而很多人卻忽視，直接使用 props 的數(shù)組用法，這樣的組件往往是不嚴(yán)謹(jǐn)?shù)摹?/p>

例如：收銀端的打印彈框組件（部分代碼已簡略）

組件中定義了4個(gè)prop，分別是==show==（控制組件的顯示隱藏），==web_view_url==（打印URL），==web_view_reback_path==（關(guān)閉打印后的跳轉(zhuǎn)地址），==web_view_error==（是否打印加載失敗）

值得注意的是，組件里定義的prop都是單向數(shù)據(jù)流，只能通過父級組件對齊進(jìn)行修改，組件本身不能修改props的值，只能修改定義在data里的數(shù)據(jù)，非要修改，也是通過后面介紹的自定義事件通知父級，由父級來修改；

solt（插槽）

先看下代碼

這里的節(jié)點(diǎn)就是指定的一個(gè)插槽的位置，這樣在組件內(nèi)部就可以擴(kuò)展內(nèi)容了；


  "icon" type="checkmark">
  按鈕 1

這樣，父級內(nèi)定義的內(nèi)容，就會出現(xiàn)在組件對應(yīng)的 slot 里，沒有寫名字的，就是默認(rèn)的 slot；

event（事件）

還是先看代碼

在組件中可以通過$emit觸發(fā)自定義事件on-click，在父組件通過@on-click來監(jiān)聽

"handleClick">
組件之間的通信方式

Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞

1、父子組件之間的通信方式

父組件向子組件的通信方式可以通過props傳遞： 如果需要從父組件獲取 username 的值，就需要

props:{
   username:{
        
   }
}

子組件向父組件傳遞數(shù)據(jù)則可以通過event傳遞：

 methods:{
    handelSwitch(index){
      this.actIndex=index;
      this.$emit("transferTabIndex",this.actIndex)
    }
  }

2、非父子組件之間的通信方式：eventBus

eventBus這種通信方式,針對的是非父子組件之間的通信,它的原理還是通過事件的觸發(fā)和監(jiān)聽；

但是因?yàn)槭欠歉缸咏M件的關(guān)系,他們需要有一個(gè)中間組件來連接；

我是使用的通過在根組件,也就是#app組件上定義了一個(gè)所有組件都可以訪問到的組件,具體使用方式如下；

使用eventBus傳遞數(shù)據(jù),我們一共需要做3件事情

1.給app組件添加Bus屬性 (這樣所有組件都可以通過this.$root.Bus訪問到它,而且不需要引入任何文件)；

2.在組件1里,this.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/6898.html

相關(guān)文章

  • vuejs組件通信精髓歸納

    摘要：組件的通信和和內(nèi)置的通信手段一般有兩種給元素或組件注冊引用信息訪問父子實(shí)例。有時(shí)候兩個(gè)組件之間需要進(jìn)行通信，但是它們彼此不是父子組件的關(guān)系。詳情可參考參考組件之間種組件通信方式總結(jié)參考參考 組件的分類 常規(guī)頁面組件，由 vue-router 產(chǎn)生的每個(gè)頁面，它本質(zhì)上也是一個(gè)組件（.vue），主要承載當(dāng)前頁面的 HTML 結(jié)構(gòu)，會包含數(shù)據(jù)獲取、數(shù)據(jù)整理、數(shù)據(jù)可視化等常規(guī)業(yè)務(wù)。 功能性抽...

    妤鋒シ 評論0 收藏0

  • 【Vue原理】Vue源碼閱讀總結(jié)大會 - 序

    摘要：扎實(shí)基礎(chǔ)幸好自己之前花了大力氣去給自己打基礎(chǔ)，讓自己現(xiàn)在的基礎(chǔ)還算不錯(cuò)。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧 【Vue原理】Vue源碼閱讀總結(jié)大會 - 序 閱讀源碼是需...

    Edison 評論0 收藏0

  • vue模擬攜程官網(wǎng)的搭建

    摘要：仿造攜程官網(wǎng)題外話剛開始學(xué)前端的時(shí)候有一天看到攜程官網(wǎng)就希望有一天能模擬搭出來自己拖拖拉拉的一直沒整但是但是麻麻我終于完成了曾經(jīng)親愛的同事把傳送門刪掉了不感謝他了感謝葉師兄拯救了我攜程攜程源碼仿攜程源碼目錄結(jié)構(gòu)基于進(jìn)行開發(fā)配合強(qiáng)行在攜程復(fù)制 仿造攜程官網(wǎng) 題外話:剛開始學(xué)前端的時(shí)候,有一天看到攜程官網(wǎng).就希望有一天能模擬搭出來.自己拖拖拉拉的一直沒整, 但是但是麻麻我終于完成了!!(曾...

    MartinHan 評論0 收藏0

  • 深入理解js對象的引用

    JavaScript 有七種內(nèi)置類型，其中： 基本類型 ? 空值(null) ? 未定義(undefined) ? 布爾值( boolean) ? 數(shù)字(number) ? 字符串(string) ? 符號(symbol，ES6 中新增) 引用類型 ? 對象(object) 對于基本類型，賦值（=）是值的拷貝，比較（===）的是實(shí)際的值，而對于引用類型（Array也是一種Object），賦值（=）...

    hedge_hog 評論0 收藏0

  • React專題：react，redux以及react-redux常見一些面試題

    摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回。使用最常見的用法就是傳入一個(gè)對象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。 面試中問框架，經(jīng)常會問到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時(shí)卻答不上來，也是挺尷尬的，就干脆把react相關(guān)的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

    darcrand 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<