`,
props: ['name'],
data () {
return {
text: ''
}
},
watch: {
text (newVal) {
this.$emit('update:name', newVal)
}
}
})
new Vue({
el: '#app',
data: {
userName: ''
},
components: {
Login
}
})你可以狠狠的戳這里查看Demo!下面劃重點，代碼里有這一句話：
this.$emit('update:name', newVal)官方語法是： update:myPropName 其中 myPropName 表示要更新的 prop 值。當(dāng)然如果你不用 .sync 語法糖使用上面的 .$emit 也能達(dá)到同樣的效果。僅此而已！
4. $attrs 和 $listeners
官網(wǎng)對 $attrs 的解釋如下：
包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 ( class 和 style 除外)。當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用。
官網(wǎng)對 $listeners 的解釋如下：
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時非常有用。
我覺得 $attrs 和 $listeners 屬性像兩個收納箱，一個負(fù)責(zé)收納屬性，一個負(fù)責(zé)收納事件，都是以對象的形式來保存數(shù)據(jù)?？聪旅娴拇a解釋：
從 Html 中可以看到，這里有倆屬性和倆方法，區(qū)別是屬性一個是 prop 聲明，事件一個是 .native 修飾器。
let Child = Vue.extend({
template: '{{ foo }}
',
props: ['foo'],
created () {
console.log(this.$attrs, this.$listeners)
// -> {bar: "parent bar"}
// -> {two: fn}
// 這里我們訪問父組件中的 `triggerTwo` 方法
this.$listeners.two()
// -> 'two'
}
})
new Vue({
el: '#app',
data: {
foo: 'parent foo',
bar: 'parent bar'
},
components: {
Child
},
methods: {
triggerOne () {
alert('one')
},
triggerTwo () {
alert('two')
}
}
})你可以狠狠的戳這里查看Demo! 可以看到，我們可以通過 $attrs 和 $listeners 進(jìn)行數(shù)據(jù)傳遞，在需要的地方進(jìn)行調(diào)用和處理，還是很方便的。當(dāng)然，我們還可以通過 v-on="$listeners" 一級級的往下傳遞，子子孫孫無窮盡也！
一個插曲！
當(dāng)我們在組件上賦予了一個非Prop 聲明時，編譯之后的代碼會把這些個屬性都當(dāng)成原始屬性對待，添加到 html 原生標(biāo)簽上，看上面的代碼編譯之后的樣子：
parent foo
這樣會很難看，同時也爆了某些東西。如何去掉？這正是inheritAttrs 屬性的用武之地！給組件加上這個屬性就行了，一般是配合 $attrs 使用?？创a：
// 源碼
let Child = Vue.extend({
...
inheritAttrs: false, // 默認(rèn)是 true
...
})再次編譯：
parent foo
5. provide / inject
他倆是對CP, 感覺挺神秘的。來看下官方對provide / inject 的描述：
provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應(yīng)用程序代碼中。并且這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時間里始終生效。
看完描述有點懵懵懂懂！一句話總結(jié)就是：小時候你老爸什么東西都先幫你存著等你長大該娶媳婦兒了你要房子給你買要車給你買只要他有的盡量都會滿足你。下面是這句話的代碼解釋：
let Son = Vue.extend({
template: 'son
',
inject: {
house: {
default: '沒房'
},
car: {
default: '沒車'
},
money: {
// 長大工作了雖然有點錢
// 僅供生活費，需要向父母要
default: '￥4500'
}
},
created () {
console.log(this.house, this.car, this.money)
// -> '房子', '車子', '￥10000'
}
})
new Vue({
el: '#app',
provide: {
house: '房子',
car: '車子',
money: '￥10000'
},
components: {
Son
}
})
你可以狠狠的戳這里查看Demo!
6. 其他方式通信
除了以上五種方式外，其實還有：
EventBus
思路就是聲明一個全局Vue實例變量 EventBus , 把所有的通信數(shù)據(jù)，事件監(jiān)聽都存儲到這個變量上。這樣就達(dá)到在組件間數(shù)據(jù)共享了，有點類似于Vuex。但這種方式只適用于極小的項目，復(fù)雜項目還是推薦 Vuex。下面是實現(xiàn) EventBus 的簡單代碼：
// 全局變量
let EventBus = new Vue()
// 子組件
let Child = Vue.extend({
template: 'child
',
created () {
console.log(EventBus.message)
// -> 'hello'
EventBus.$emit('received', 'from child')
}
})
new Vue({
el: '#app',
components: {
Child
},
created () {
// 變量保存
EventBus.message = 'hello'
// 事件監(jiān)聽
EventBus.$on('received', function (val) {
console.log('received: '+ val)
// -> 'received: from child'
})
}
})
你可以狠狠的戳這里查看Demo!
Vuex
官方推薦的，Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
$parent
父實例，如果當(dāng)前實例有的話。通過訪問父實例也能進(jìn)行數(shù)據(jù)之間的交互，但極小情況下會直接修改父組件中的數(shù)據(jù)。
$root
當(dāng)前組件樹的根 Vue 實例。如果當(dāng)前實例沒有父實例，此實例將會是其自己。通過訪問根組件也能進(jìn)行數(shù)據(jù)之間的交互，但極小情況下會直接修改父組件中的數(shù)據(jù)。
broadcast / dispatch
他倆是 vue@1.0 中的方法，分別是事件廣播 和 事件派發(fā)。雖然 vue@2.0 里面刪掉了，但可以模擬這兩個方法?？梢越梃b Element 實現(xiàn)。有時候還是非常有用的，比如我們在開發(fā)樹形組件的時候等等。
關(guān)于Vue.js中實現(xiàn)父子組件通信的方式有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
當(dāng)前題目：Vue.js中實現(xiàn)父子組件通信的方式有哪些
本文地址：http://weahome.cn/article/jigiih.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
