父傳子
靜態(tài)傳值：父組件在子組件標(biāo)簽中寫入要傳遞的變量及變量值
<child message="messageValue"></child>
動態(tài)傳值：父組件在子組件標(biāo)簽中用v-bind指令為所傳變量動態(tài)綁定變量值
<child :message="message"></child>

子組件中使用props接收父組件的數(shù)據(jù)
props:["message"]

QQ圖片20200528165908.png

QQ圖片20200528165919.png

此時的數(shù)據(jù)是單向綁定，父組件數(shù)據(jù)改變影響子組件，將上述例子中 :put_demo4="put_demo4" 替換成:put_demo4.sync="put_demo4"即可實現(xiàn)數(shù)據(jù)雙向綁定

子傳父
父組件在引用的子組件上定義一個自定義事件，并綁定事件函數(shù)，用于接受子組件傳過來的值
<child @customEvent="eventFunction"></child >
子組件通過函數(shù)使用$emit()觸發(fā)父組件自定義事件，將數(shù)據(jù)傳遞給父組件
this.$emit("customEvent", this.message);

QQ圖片20200530014339.png

QQ圖片20200530014343.png

兄弟組件傳值
方法一：利用父組件作為橋梁，通過父子傳值方法，以子組件1=>父組件=>子組件2的方式進(jìn)行兄弟組件通信
方式二：在main.js創(chuàng)建vue實例eventBus，在組件一中使用eventBus.$emit()觸發(fā)自定義事件，在組件二中使用eventBus.on()實現(xiàn)對自定義事件的偵聽，以此達(dá)到 兄弟組件間的通信

QQ圖片20200531122918.png

QQ圖片20200531122820.png