1. 父子通信
(1)setup函數(shù)提供倆個參數(shù),第一個參數(shù)為props贱案,第二個參數(shù)為一個對象context
(2)props為一個對象溉奕,內(nèi)部包含了父組件傳遞過來的所有prop數(shù)據(jù)格侯,context對象包含了attrs,slots押袍, emit屬性,其中的emit可以觸發(fā)自定義事件的執(zhí)行從而完成子傳父
(3)context:context是一個js對象凯肋,這個對象暴露了三個組件的屬性谊惭,可以通過解構(gòu)賦值的方式來獲取這三個屬性
attrs:它是綁定到組件的非props數(shù)據(jù),并且是非響應(yīng)式的
slots:是組件的插槽侮东,同樣不是響應(yīng)式的
emit:是一個方法圈盔,相當于vue2中的this.$emit方法,可用于實現(xiàn)子傳父
當子組件想要修改父組件數(shù)據(jù)時悄雅,只用使用?this.$emit('update:dataName',
dataValue)這種方式去通知父組件驱敲,父組件上不需要做任何操作
(1)父傳子
父組件:在子組件上通過 v-bind綁定屬性
子組件:通過props接收參數(shù)
例:
props:['name1','name2]
或者
props:{
name1:{
type: Number,
default: 0
},
name2:{
??? type: Boolean,
? default: false
}
}
(2)子傳父
子:
? ? const changevVisible = () =>{
? ? ? context.emit("update:visible", false);
? ? ? context.emit('changeValue', '我被子組件改變了')
? ?}
(vue2中不使用setup()函數(shù),直接在函數(shù)中使用this.$emit來發(fā)送事件)
父:
<Popover v-model:number="num" v-model:visible="isShow" @changeValue="changeValue"></Popover>
const changeValue = (val) => {
? ?console.log(val)
}
2.跨多級組件通信
作用:用于父組件向子孫組件傳遞數(shù)據(jù)
使用方法:provide在父組件中返回要傳給下級的數(shù)據(jù)宽闲,inject在需要使用這個數(shù)據(jù)的子輩組件或者孫輩等下級組件中注入數(shù)據(jù)众眨。
使用場景:由于vue有$parent屬性可以讓子組件訪問父組件握牧。但孫組件想要訪問祖先組件就比較困難。通過provide/inject可以輕松實現(xiàn)跨級訪問父組件的數(shù)據(jù)
(1) 實現(xiàn)步驟:
頂層組件在setup方法中使用provide函數(shù)提供數(shù)據(jù)
任何底層組件在setup方法中使用inject函數(shù)獲取數(shù)據(jù)
(2) 傳遞響應(yīng)式數(shù)據(jù)