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

步驟：

1. 在父組件中通過 v-bind 將數(shù)據(jù)傳給子組件
2. 在子組件中通過 props 接收父組件傳遞過來的數(shù)據(jù)

<div id="app">
	<!-- 1.通過 v-bind 將數(shù)據(jù)傳給子組件 -->
    <test v-bind:ss='name'></test>
</div>

<script>
    var a = new Vue({
        el:'#app',
        data:{
            name:'bing',
        },
        components: {
            test:{
                props: ['ss'],   // 2.接收父組件傳遞過來的數(shù)據(jù)
                template:"<p>{{ss}}</p>"
            }
        }
    })
</script>

props使得父子之間形成一種 單向數(shù)據(jù)流 ，父元素更新的時候，子元素的狀態(tài)也會隨之改變。
但反之會導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解，因此在子組件中不能修改父組件中的數(shù)據(jù)。

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

子組件通過 $emit 事件向父組件發(fā)送消息，將自己的數(shù)據(jù)傳遞給父組件。

步驟：

1. 在子組件上綁定一個 click 事件，觸發(fā) increment 方法
2. 在 increment 方法中用 $emit 定義一個自定義事件 increment ，同時傳入 this.counter 參數(shù)
3. 在父組件上綁定步驟2中自定義的 increment 事件，方法名為 incrementTotal
4. 在父組件中調(diào)用步驟3中的 incrementTotal 方法，這時 incrementTotal 方法就能接收到子組件傳入的參數(shù)

<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: '子組件的數(shù)據(jù)'
            } 
        },
        methods: {
            increment: function () {
                this.$emit('increment', this.counter); // 步驟2
            }
        }
    });


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

三、兄弟組件傳值（EventBus）

如果不需要類似 Vuex 這樣的庫來處理組件之間的數(shù)據(jù)通信，就可以考慮Vue中的 事件總線（EventBus） 來通信。

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

這個方法是通過創(chuàng)建一個空的 vue 實例，當做 $emit 事件的處理中心（事件總線），通過他來觸發(fā)以及監(jiān)聽事件，方便的實現(xiàn)了任意組件間的通信，包含父子，兄弟，隔代組件。具體如下：

1. 初始化（new Vue()）

首先需要創(chuàng)建事件總線并將其導(dǎo)出，以便其它模塊可以使用或者監(jiān)聽它。
我們可以通過兩種方式來處理。

方法一： 新創(chuàng)建一個 event-bus.js 文件

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

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

// main.js
Vue.prototype.$EventBus = new Vue() // 注意:這種方式初始化的EventBus是一個全局的事件總線

現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus ，接下來你需要做到的就是在你的組件中加載它，并且調(diào)用同一個方法，就如你在父子組件中互相傳遞消息一樣。

2. 發(fā)送事件（$emit()）

假設(shè)有兩個Vue頁面需要通信： A 和 B 。A頁面中在按鈕上面綁定了點擊事件，發(fā)送一則消息，想通知 B頁面。

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

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '來自A頁面的消息'); // 對外發(fā)送數(shù)據(jù)
    }
  }
}; 
</script>

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

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

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

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

4. 移除事件監(jiān)聽者

前面提到過，如果使用不善，EventBus會是一種災(zāi)難，到底是什么樣的“災(zāi)難”了？大家都知道vue是單頁應(yīng)用，如果你在某一個頁面刷新了之后，與之相關(guān)的EventBus會被移除，這樣就導(dǎo)致業(yè)務(wù)走不下去。還要就是如果業(yè)務(wù)有反復(fù)操作的頁面，EventBus在監(jiān)聽的時候就會觸發(fā)很多次，也是一個非常大的隱患。這時候我們就需要好好處理EventBus在項目中的關(guān)系。通常會用到，在vue頁面銷毀時，同時移除EventBus事件監(jiān)聽。

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

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

EventBus.$off('aMsg')移除應(yīng)用內(nèi)所有對此某個事件的監(jiān)聽。
或者直接調(diào)用 EventBus.$off() 來移除所有事件頻道，不需要添加任何參數(shù) 。

四、Vuex

在做中大型的單頁應(yīng)用的時候，例如需要多人協(xié)作開發(fā)，全局維護登錄狀態(tài)等，我們最好還是選擇vuex來進行狀態(tài)管理。

vuex詳解傳送門

到此這篇關(guān)于Vue組件通信方法案例總結(jié)的文章就介紹到這了,更多相關(guān)Vue組件通信方法總結(jié)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論