`,
props: ['name'],
data () {
return {
text: ''
}
},
watch: {
text (newVal) {
this.$emit('update:name', newVal)
}
}
})
new Vue({
el: '#app',
data: {
userName: ''
},
components: {
Login
}
})代碼里只有一句話：
this.$emit('update:name', newVal)官方語法是：update:myPropName 其中 myPropName 表示要更新的 prop 值。當然如果你不用 .sync 語法糖使用上面的 .$emit 也能達到同樣的效果
4、 $attrs 和 $listeners
官網(wǎng)對 $attrs 的解釋如下：
包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內部組件——在創(chuàng)建高級別的組件時非常有用。
官網(wǎng)對 $listeners 的解釋如下:
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創(chuàng)建更高層次的組件時非常有用。
$attrs 和 $listeners 屬性像兩個收納箱，一個負責收納屬性，一個負責收納事件，都是以對象的形式來保存數(shù)據(jù)
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')
}
}
})可以看到，我們可以通過 $attrs 和 $listeners 進行數(shù)據(jù)傳遞，在需要的地方進行調用和處理，還是很方便的。當然，我們還可以通過 v-on="$listeners" 一級級的往下傳遞，子子孫孫無窮盡也！
5、privide 和 inject
來看下官方對 provide / inject 的描述：
provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。并且這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。
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
}
})
感謝你能夠認真閱讀完這篇文章，希望小編分享的“vuejs怎么設置父子通信”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!
名稱欄目：vuejs怎么設置父子通信
URL網(wǎng)址：http://weahome.cn/article/giesee.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
