資訊專欄INFORMATION COLUMN
摘要：組件之間的通訊分為三種父給子傳子給父?jìng)餍值芙M件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個(gè)標(biāo)識(shí)，在子組件內(nèi)部用接收，子組件在模板里可以通過的形式進(jìn)行使用。
組件之間的通訊分為三種 父給子傳 子給父?jìng)?兄弟組件之間的通訊 1 父組件給子組件傳值
子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個(gè)標(biāo)識(shí)，在子組件內(nèi)部用props接收，子組件在模板里可以通過{{}}的形式進(jìn)行使用。如果父組件給子組件傳遞的標(biāo)識(shí)中含有—，子組件在接收時(shí)采用駝峰式接收。
父組件調(diào)用子組件的地方，
添加自定義屬性，屬性名隨便定義（但是不要定義id,class等）
屬性值為你需要傳遞的值（這個(gè)值可以是變量，如果是變量則使用綁定屬性）
定義子組件的地方，
添加一個(gè)選項(xiàng)props，它是一個(gè)數(shù)組
數(shù)組中的元素就是父元素提供的屬性名
那么，在子組件內(nèi)部就可以直接使用父組件中定義的屬性名，得到傳遞過來的屬性值
2 子組件給父組件傳值
子組件給父組件傳值（相對(duì)于父給子傳麻煩一點(diǎn)，就如我們常說的人往高處走，水往低處流嘛，如果要想水井里面的水到達(dá)地面上來，最起碼我們要有個(gè)管，這個(gè)管就是子組件給父組件傳值的通道）
子組件中，定義好一個(gè)事件標(biāo)識(shí)，--- to-parent（相當(dāng)于定義好了通道）（注意不要駝峰式命名）
然后通過this.$emit("to-parent", 傳遞的值)
父組件調(diào)用子組件的地方，執(zhí)行這個(gè)事件，-----事件標(biāo)識(shí) to-parent
父組件實(shí)現(xiàn)方法getMoney，得到的值就是子組件傳遞給父組件的值
我是孩子
,
這個(gè)月孩子打了{(lán){money}}元錢
const Son = {
template: "#son",
data () {
return {
}
},
methods: {
giveMoney (val) {
// 你辦了卡，把卡給了父母，你打錢
this.$emit("to-parent", val)
}
}
}
// 1、定義組件 ---- 組件的首字母必須大寫
const Test = {
template: "#test",
data () {
return {
money: 0
}
},
methods:{
getMoney ( val ) {
this.money = val
}
},
components: {
"v-son": Son
}
}
非父子間的傳值我個(gè)人覺得算是組件傳值中最麻煩的一個(gè)，你說它難她也難，說它簡(jiǎn)單它也簡(jiǎn)單，我們只要定義好一方負(fù)責(zé)監(jiān)聽一方負(fù)責(zé)觸發(fā)即可，他們之間相互傳值依據(jù)的是中央事件總線，也就是new vue ,相當(dāng)于飛機(jī)場(chǎng)中的塔臺(tái)一樣，都受它指揮。
$on 負(fù)責(zé)監(jiān)聽事件
$emit 負(fù)責(zé)觸發(fā)事件 并傳遞參數(shù)
如果有AB兩個(gè)組件，如果A要給B傳值，B就必須先監(jiān)聽A，使用起來比較麻煩。
事件的中央總線 （飛機(jī)塔臺(tái)，郵差的故事）
在src下創(chuàng)建bus.js
var bus = new Vue() //中央事件總線
export default bus ；
假如有AB兩個(gè)組件
在AB組件中引入bus中央事件總線
在A組件中發(fā)送一個(gè)信息給B組件
methods:{
sendData(val){
bus.$emit("A-B",val)
}
}
mounted（）{
bus.$on("B-A",function(val){
console.log（val）
})
}
在B組件內(nèi)接收
mounted（）{
bus.$on("A-B",function(val){
console.log（val）
bus.$emit("B-A",val)
})
}
如果AB組件有兩次交互，就會(huì)有四次事件，如果做三次事件就會(huì)有六次事件
其實(shí)最麻煩的不是他們之間的傳值，而是定義他們之間的事件名稱，如果沒有一套完備定義事件名稱的規(guī)則，會(huì)無端的增加項(xiàng)目開發(fā)的周期，降低了開發(fā)效率，代碼的耦合度會(huì)增加，維護(hù)性也低了。
所以不建議使用
可以在main.js中 vue.prototype.$bus = new Vue()在原型上擴(kuò)展一個(gè)$bus 不用單創(chuàng)建bus文件 通過this.$bus.$on()進(jìn)行使用
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52738.html
摘要：組件之間的通訊分為三種父給子傳子給父?jìng)餍值芙M件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個(gè)標(biāo)識(shí)，在子組件內(nèi)部用接收，子組件在模板里可以通過的形式進(jìn)行使用。 組件之間的通訊分為三種 父給子傳 子給父?jìng)?兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個(gè)標(biāo)識(shí)，在子組件內(nèi)部用props接收，子組件在模板里可以通過{{}}的...
摘要：組件之間的通訊分為三種父給子傳子給父?jìng)餍值芙M件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個(gè)標(biāo)識(shí)，在子組件內(nèi)部用接收，子組件在模板里可以通過的形式進(jìn)行使用。 組件之間的通訊分為三種 父給子傳 子給父?jìng)?兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個(gè)標(biāo)識(shí)，在子組件內(nèi)部用props接收，子組件在模板里可以通過{{}}的...
摘要：父組件默認(rèn)值默認(rèn)值哈哈哈哈傳值給子組件接受子組件的傳值為子組件啦啦啦啦接受父組件傳的值為傳值給父組件 父組件： import React, { Component } from react; import Child from ./chlid; class parent extends Component{ constructor(props) { super...
摘要：缺點(diǎn)用這種方法寫出來的組件十分難維護(hù)，因?yàn)槟悴⒉恢罃?shù)據(jù)的來源是哪里，有悖于單向數(shù)據(jù)流的原則拿到的是一個(gè)數(shù)組，你并不能很準(zhǔn)確的找到你要找的子組件的位置，尤其是子組件多的時(shí)候。 幾種常見的Vue組件間的傳參方式 Vue父子組件通訊的方法其實(shí)有很多，本文只是做一個(gè)總結(jié)，說說他們的優(yōu)缺點(diǎn)，具體如何使用相關(guān)文檔和網(wǎng)上大神已經(jīng)總結(jié)的很多里，這里就不再說明。 1.Vuex 介紹 Vuex 是一個(gè)專...
摘要：一父子組件之間的傳值父組件傳遞給子組件需要在子組件中通過接收值子組件傳遞給父組件自定義事件，要傳輸?shù)闹底痈冈谧咏M件中需要通過點(diǎn)擊事件傳遞給父組件值，點(diǎn)擊事件觸發(fā)后，通過自定義事件，要傳遞的值注意在父組件接收時(shí)必須在對(duì)應(yīng)的子組件接收相應(yīng) 一：父子組件之間的傳值** 父組件傳遞給子組件：需要在子組件中通過props接收值子組件傳遞給父組件：$emit(自定義事件，要傳輸?shù)闹? 子--->父...
閱讀 1004·2023-04-25 15:42
閱讀 3596·2021-11-02 14:38
閱讀 2891·2021-09-30 09:48
閱讀 1428·2021-09-23 11:22
閱讀 3388·2021-09-06 15:02
閱讀 3190·2021-09-04 16:41
閱讀 610·2021-09-02 15:41
閱讀 2018·2021-08-26 14:13
