vue組件之間的通信包括三種:
1.父組件向子組件通信
2.子組件向父組件通信
3.同級組件之間的通信
首先,看一下vue-cli工程的部分目錄:
一业扒、父組件向子組件通信
說明:
step1:??在父組件的<zi-zu-jian-one>標(biāo)簽里加上msgfromfather屬性减途,當(dāng)然酣藻,這個(gè)屬性是我們自己定義的,里面給它賦上一個(gè)值观蜗,上面這個(gè)案例是一個(gè)字符串Iam App.vue臊恋;
step2:??然后在子組件里要想獲得這個(gè)自定義屬性的值,首先墓捻,在子組件里加上選項(xiàng)props抖仅,然后在模板中通過{{XXX }}使用。
二砖第、子組件向父組件通信
子組件:單擊事件+$emit(父組件自定義事件+數(shù)據(jù))
父組件:自定義事件+數(shù)據(jù)賦值展示
說明:
step1:在父組件的<zi-zu-jian-one>標(biāo)簽里使用v-on自定義綁定一個(gè)child-tell-me事件撤卢,然后給這個(gè)事件添加listenToSon方法,那么梧兼,怎么觸發(fā)這個(gè)child-tell-me事件放吩,從而讓它調(diào)用呢listenToSon方法呢?通過this.$emit('事件名稱'羽杰,'傳入?yún)?shù)')來觸發(fā)渡紫;
step2:子組件通過點(diǎn)擊按鈕來觸發(fā)這個(gè)事件到推,然后還把子組件里面的sonWord數(shù)據(jù)傳遞過去,父組件里面的listenToSon方法就會被執(zhí)行惕澎,然后我把傳遞過來的sonWord賦值給父組件里面的childWord莉测,從而達(dá)到通信的效果。
三唧喉、同級組件的通信
要點(diǎn):建立一個(gè)新的Vue實(shí)例捣卤,以后它就承擔(dān)起了組件之間通信的橋梁了,也就是中央事件總線八孝。
方法:新建一個(gè)js文件,命名為event.js董朝。
說明:
①在兩個(gè)組件中均引入:import bus from '../assets/event.js';
②使用bus.$emit('事件名稱'干跛,'傳入?yún)?shù)')子姜,作為發(fā)送消息的那一方;
③使用bus.$on('事件名稱'驯鳖,'回調(diào)函數(shù)')闲询,作為接收消息的那一方。
全文轉(zhuǎn)載自:https://blog.csdn.net/qq_38563845/article/details/77444973