- 父 --> 子：父組件中用 :xx = "this.xxx"盛龄，子組件通過props來接收
- 子 --> 父：子組件中定義 this.$emit('eventName', data)捅暴；父組件中接收：
@eventName="callback"
- 兄弟組件傳參耕挨，可以使用EventBus：相互通信的兄弟組件之中竭贩，都引入一個(gè)新的vue實(shí)例，然后通過分別調(diào)用這個(gè)實(shí)例的事件觸發(fā)和監(jiān)聽來實(shí)現(xiàn)通信和參數(shù)傳遞拍嵌。
- 新建一個(gè)js文件输拇，來創(chuàng)建出我們的eventBus，我們把它命名為bus.js 抢野；
import Vue from 'vue';export default new Vue()拷淘；
- 在click組件和show組件中import它：
import Bus from 'common/js/bus.js';
- 傳遞參數(shù)的組件中定義：
Bus.$emit('getTarget', data);
- 接收組件中定義：
Bus.$on('getTarget', target => { console.log(target); });
- 使用vuex狀態(tài)管理對(duì)數(shù)據(jù)進(jìn)行統(tǒng)一管理
- 父 ->子 -> 孫：使用
listeners實(shí)現(xiàn)祖孫組件之間的數(shù)據(jù)傳遞
- 父組件用于動(dòng)態(tài)數(shù)據(jù)的綁定與事件的定義
<child1 :one="child1" :two="child2" @test1="onTest1" @test2="onTest2"></child1>
- 子組件的寫法：通過設(shè)置v-bind="
listeners"來充當(dāng)中間人
<!-- 子組件中通過v-bind='$attrs'接受數(shù)據(jù)，通過$listeners接收事件 -->
<child2 v-bind="$attrs" v-on="$listeners"></child2>
props: ['one','two'], //可寫可不寫
data () {
return {
}
},
inheritAttrs: false, //父組件傳遞動(dòng)態(tài)數(shù)據(jù)后指孤，子組件的默認(rèn)行為
// 當(dāng)inheritAttrs設(shè)置為true時(shí)启涯，父元素動(dòng)態(tài)綁定組件的數(shù)據(jù)贬堵，子組件如果沒有通過props接收的話，該屬性就會(huì)附加于子組件的根元素上结洼。什么意思看代碼
components: {
child2
},
mounted () {
this.$emit('test1') //觸發(fā)父組件方法的一種方式
this.$listeners.test2(123) //觸發(fā)父組件方法的另一種方式
}
- 孫組件寫法： 通過props或者listeners來獲取父組件數(shù)據(jù)和事件黎做。
<p>props:{{one}}</p>
<p>props:{{two}}</p>
<p>$attrs: {{$attrs['one']}}</p>
props:['one','two'], //接收父組件傳遞的數(shù)據(jù)，可以不寫松忍，通過$attrs來獲取
inheritAttrs: false, //默認(rèn)行為需要取消
mounted(){
this.$emit('test1') //觸發(fā)父組件方法的一種方式
this.$listeners.test1(123)//觸發(fā)父組件方法的另一種方式
}
- :star::star:vue 依賴注入：provide引几、inject 祖先組件和后代組件的數(shù)據(jù)傳輸
祖先組件可以用 provide 給后代組件提供一些數(shù)據(jù)；后代組件可以使用 inject 接受祖先組件提供的數(shù)據(jù)
// father
provide: {
foo: 'bar',
}
// child
inject: ['foo']
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
