資訊專欄INFORMATION COLUMN
摘要：組件實(shí)例之間的作用域是孤立存在，要讓它們之間的信息互通，就必須采用組件的通信方式用于父組件向子組件傳達(dá)信息靜態(tài)方式以數(shù)組的形式發(fā)出自己所需要的信息至于父親給不給，就由父親說了算，父作用域給予回應(yīng)，將回應(yīng)回去，兒子得到自己想要的，然后展
組件實(shí)例之間的作用域是孤立存在，要讓它們之間的信息互通，就必須采用組件的通信方式
props用于父組件向子組件傳達(dá)信息
1.靜態(tài)方式
eg:
props以數(shù)組的形式發(fā)出自己所需要的信息(至于父親給不給，就由父親說了算)，父作用域給予回應(yīng)，將message=‘hello’回應(yīng)回去，兒子得到自己想要的，然后展現(xiàn)在html結(jié)構(gòu)中;
2.動態(tài)獲取數(shù)據(jù)
子組件要得到父親口袋里面的東西（實(shí)例里面的數(shù)據(jù)），必須通過v-bind類似于綁定結(jié)構(gòu)屬性的方式發(fā)送給子組件；
eg:
渲染結(jié)果為：
zhangsan---name---0
man---sex---1
science---job---2
注意：在組件里面用v-for一定要寫個外層標(biāo)簽包著v-for，因?yàn)榇蟾缰荒苡幸粋€，不能寫并行標(biāo)簽
當(dāng)然也可以傳遞方法給子組件
如果傳遞過來的方法中帶有父組件里面的屬性，也可以用
eg:
彈出框顯示hello, world
由此我們可以得出：父組件傳遞給子組件的是一個引用地址，但是這個引用是單向的，只能父組件改變的時候子組件獲得的信息也會發(fā)生變化，但是子組件不可以去更改父組件傳遞過來的值，但是可以去加工
eg:
彈出框顯示：hello,world i am god
eg:
顯示結(jié)果：
1.gif
props可以用來規(guī)定自己需要的數(shù)據(jù)類型，此時props將需求以對象的形式呈現(xiàn)，兒子開始挑剔了，但是父親給他的不符合要求時候，它便會報錯，但是畢竟是父親給的，所以還是會渲染出來
eg：
blob.png
關(guān)于兒子組件的具體挑剔要求，我直接引個官網(wǎng)文檔，就不做過多說明了
Vue.component("example", {
props: {
// 基礎(chǔ)類型檢測 (`null` 意思是任何類型都可以)
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propD: {
type: Number,
default: 100
},
// 數(shù)組/對象的默認(rèn)值應(yīng)當(dāng)由一個工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: "hello" }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
})
$emit與$on，關(guān)于這一對兄弟，接觸過angular.js和react的應(yīng)該都很熟悉，$emit是發(fā)射的意思，$on 為監(jiān)聽，主要用于子組件向父組件傳遞信號，當(dāng)然，兒子廣播出去，父親聽不聽就是父親的事情了
eg:
{{a}}
顯示如下：
1.gif
父親在監(jiān)控ok,每當(dāng)聽到兒子通過$emit發(fā)送過來ok時候，父親就開始執(zhí)行自己的add方法
當(dāng)然兒子也可以向父親傳遞信息過去
eg:
{{a}}
顯示效果：
1.gif
兒子將自己的i值傳遞給父親，父親通過接收到的i值將自己的a值更改
監(jiān)聽原生事件的時候，父親只需要在自己的監(jiān)聽器上加一個炫酷特效.native,兒子不需要去發(fā)廣播，父親就會知道，也就是說有些事情只要老爸愿意了解，不需要兒子去告訴，他自己也可以選擇知道
eg:
{{a}}
顯示結(jié)果：
1.gif
除了父子直接可以互相通信外，子組件直接互相通信，需要一個子組件先將信息傳遞給父組件，父組件再交給另一個子組件
eg:
我是父親且a為：{{a}}
slot分發(fā)模式主要用于在組件中間插入標(biāo)簽或者組件之間的相互嵌套
單個內(nèi)容插入，可以選擇用slot標(biāo)簽事先占個位置
eg:
渲染結(jié)果為：
我就是：slot分發(fā)
也就是說slot類似于一個插槽，提前站好一個位置，要插入組件中的標(biāo)簽類似于卡，插入提前站好位置的插槽中
多個標(biāo)簽插入，就需要按照名字一一對號入座
eg:
我是1號卡片
我是2號卡片
我是3號卡片
作用域插槽還是有點(diǎn)抽象的，也就是子組件充當(dāng)插槽，父組件將內(nèi)容插在子組件上面，并且子組件將值傳遞給父組件，父組件用scope="props"來接收子組件傳過來的值
eg:
動態(tài)組件通過component來動態(tài)切換組件的內(nèi)容
eg:
帶圖原文地址http://www.cnblogs.com/douyae...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88930.html
摘要：事件總線事件總線首先創(chuàng)建了一個名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-component, {}); 要在父實(shí)例中使用這個組件，必須要...
摘要：它們之間必然需要相互通信父組件要給子組件傳遞數(shù)據(jù)，子組件需要將它內(nèi)部發(fā)生的事情告知給父組件。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這是由使用的父組件決定的。 Vue.js的組件 注冊組件 全局注冊 要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...
閱讀 3094·2021-11-24 09:39
閱讀 2351·2021-10-08 10:05
閱讀 2885·2021-09-24 13:52
閱讀 1666·2021-09-22 15:07
閱讀 654·2019-08-30 15:55
閱讀 1865·2019-08-30 15:53
閱讀 745·2019-08-30 15:44
閱讀 3184·2019-08-30 11:20
