目錄

• 一、父元件向子元件傳值（props）
• 二、子元件向父元件傳值（$emit）
• 三、兄弟元件傳值（EventBus）
• 1. 初始化（new ()）
• 2. 傳送事件（$emit()）
• 3. 接收事件（$on()）
• 4. 移除事件監聽者
• 四、Vuex

一、父元件向子元件傳值（props）

步驟：

1. 在父元件中通過 v-bind 將資料傳給子元件
2. 在子元件中通過 props 接收父元件傳遞過來的資料

<div id="app">
	<!-- 1.通過 v-bind 將資料傳給子元件 -->
    <test v-bind:ss='name'></test>
</div>

www.cppcns.com
 
<script>
    var a = new Vue({
        el:'#app',data:{
            name:'bing',},components: {
            test:{
                props: ['ss'],// 2.接收父元件傳遞過來的資料
                template:"<p>{{ss}}</p>"
            }
        }
    })
</script>

props使得父子之間形成一種 單向資料流 ，父元素更新的時候，子元素的狀態也會隨之改變。

二、子元件向父元件傳值（$emit）

子元件通過 $emit 事件向父元件傳送訊息，將自己的資料傳遞給父元件。

步驟：

1. 在子元件上繫結一個 click 事件，觸發 increment 方法
2. 在 increment 方法中用 $emit 定義一個自定義事件 increment ，同時傳入 this.counter 引數
3. 在父元件上繫結步驟2中自定義的 increment 事件，方法名為 incrementTotal
4. 在父元件中調www.cppcns.com用步驟3中的 incrementTotal
   方法，這時 incrementTotal 方法就能接收到子元件傳入的引數

<div id="app">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter> <!-- 步驟3 -->
</div>

<script>
    Vue.component('button-counter',{
        template: '<button v-on:click="increment">{{ counter }}</button>',// 步驟1
        data: function () {
            return {
                counter: '子元件的資料'
            } 
        },methods: {
            increment: function () {
                this.$emit('increment',this.counter); // 步驟2
            }
        }
    });


    new Vue({
        el: '#app',data: {
            total: '父元件的資料:'
        },methods: {
            incrementTotal: function (e) { // 步驟4
                this.total = this.total + e[0]
                console.log(e);
            }
        }
    })
</script>

三、兄弟元件傳值（EventBus）

如果不需要類似 Vuex 這樣的庫來處理元件之間的資料通訊，就可以考慮Vue中的 事件匯流排（EventBus） 來通訊。

在 Vue 中可以使用 EventBus 來作為溝通橋樑的概念，就像是所有元件共用相同的事件中心，可以向該中心註冊傳送事件或接收事件，所以元件都可以上下平行地通知其他元件。
但也就是太方便所以若使用不慎，就會造成難以維護的“災難”，因此才需要更完善的Vuex作為狀態管理中心，將通知的概念上升到共享狀態層次。

這個方法是通過建立一個空的 vue 例項，當做 $emit 事件的處理中心（事件匯流排），通過他來觸發以及監聽事件，方便的實現了任意元件間的通訊，包含父子，兄弟，隔代元件。具體如下：

1. 初始化（new Vue()）

首先需要建立事件匯流排並將其匯出，以便其它模組可以使用或者監聽它。
我們可以通過兩種方式來處理。

方法一： 新建立一個 event-bus. 檔案

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

方法二： 直接在專案中的 main.js 初始化 EventBus

// main.js
Vue.prototype.$EventBus = new Vue() // 注意:這種方式初始化的EventBus是一個全域性的事件匯流排

現在我們已經建立了 EventBus ，接下來你需要做到的就是在你的元件中載入它，並且呼叫同一個方法，就如你在父子元件中互相傳遞訊息一樣。

2. 傳送事件（$emit()）

假設有兩個Vue頁面需要通訊： A 和 B 。A頁面中在按鈕上面綁定了點選事件，傳送一則訊息，想通知 B頁面。

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg",'來自A頁面的訊息'); // 對外發送資料
    }
  }
}; 
</script>

3. 接收事件（$on()）

接下來，需要在 B頁面中接收這則訊息。

<!-- B.vue -->
<template>
	<p>{{msg}}</www.cppcns.comp>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
	data() {
		return {
			msg: ''
		}
	},mounted() {
		EventBus.$on("aMsg",(msg) => { // 接收 A 傳送來的訊息
			this.msg = msg;
		});
	}
};
</script>

4. 移除事件監聽者

前面提到過，如果使用不善，EventBus會是一種災難，到底是什麼樣的“災難”了？大家都知道vue是單頁應用，如果你在某一個頁面重新整理了之後，與之相關的EventBus會被移除，這樣就導致業務走不下去。還要就是如果業務有反覆操作的頁面，EventBus在監聽的時候就會觸發很多次，也是一個非常大的隱患。這時候我們就需要好好處理EventBus在專案中的關係。通常會用到，在vue頁面銷燬時，同時移除EventBus事件監聽。

如果想移除事件的監聽，可以像下面這樣操作：

import { EventBus } from MKpbl"../event-bus.js";
EventBus.$off('aMsg',{})

EventBus.$off('aMsg')移除應用內所有對此某個事件的監聽。
或者直接呼叫 EventBus.$off() 來移除所有事件頻道，不需要新增任何引數 。

四、Vuex

在做中大型的單頁應用的時候，例如需要多人協作開發，全域性維護登入狀態等，我們最好還是選擇vuex來進行狀態管理。

vuex詳解傳送門

到此這篇關於Vue元件通訊方法案例總結的文章就介紹到這了,更多相關Vue元件通訊方法總結內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！