這一節我們還是來繼續介紹組件：組件之間如何通信。

第九節我們在介紹組件知識的時候，提到過組件可以接受參數props，這其實就是組件之間的一種通信方式：父組件→子組件傳遞數據。?

父組件→子組件

那我們還是不厭其煩地再演示一遍：父組件→子組件傳遞數據。

組件實例的作用域都是孤立的，也就是子組件在模板template不能引用父組件的數據，那么，當子組件有需要使用父組件的時候，我們該怎么辦呢？

這里，我們使用的是組件的props選項來聲明它想要獲得的數據。

我們先來準備一個vue實例：

<div id="app"></div>
<script>
??? //創建一個vue實例
??const app = new Vue({
??????? el:"#app",
??????? data:{
??????????? msg:"我是父組件的數據"
??????? }
??? });
</script>

實例app中含有數據msg值為“我是父組件的數據”，待會我們把它傳遞給子組件。

子組件還沒有注冊，接下來，我們就注冊一個組件，組件取名為son：?

<div id="app">
??? <son></son>
</div>


Vue.component('son',{
??? template:`<div></div>`
});

子組件準備好了，下一步就開始傳遞數據，父組件向子組件傳遞參數，我們說過，用組件提供的props選項，接下來，我們就把父組件的msg傳給子組件，并展示在頁面上。

上面的代碼稍加修改：

<div id="app">
??? <son :message="msg"></son>
</div>


Vue.component('son',{
??? props:['message'],
??? template:`<div>{{message}}</div>`
});

props選項聲明了它要接受的參數是message，而接收到的對應的值是父組件的數據msg。我們在子組件順利地把message展示出來。

看效果圖：

（沒毛病）

注意：props是單向綁定的（父→子），是vue為了防止子組件無意修改了父組件的數據和狀態，如果多個子組件任意地對父組件進行修改，這會讓這很整個應用的數據流難以閱讀。

如果你想修改父組件傳過來的數據，最好是定義一個局部的變量，來依賴傳過來的數據。

這就是父組件→子組件通信的實現，那么，你可能會聯想到，如果是子組件向父組件傳遞數據，要怎么實現呢？?

子組件→父組件

接下來，我們就學習子組件→父組件通信。?

相比父→子組件通信，子→父組件就稍微繁瑣一點。我們會使用到組件的一個知識點：自定義事件。?

網頁事件我們聽得多，常用到的有click點擊事件，focus聚焦事件等等，事件要怎么自定義呢？?

每一個vue實例都實現了事件接口，我們可以用它提供的API $emit( eventName)來觸發一個事件。?

是不是聽得還是有點云里霧里的？我們來演示一下：

我們注冊一個新組件：

Vue.component('son',{
? ?template:`<button @click="send">
? ? ? ? ? ? ? ?點擊
? ? ? ? ? ? </button>`,
? ?methods:{
? ? ? ?send(){
? ? ? ? ? ?this.$emit('connect');
? ? ? ?}
? ?}
});

很簡單的一個組件，就是一個按鈕button，點擊它的時候，會觸發組件內部的send( )方法，而方法體里面會觸發一個事件，事件名取名為：“connect”。

然后我們就去父組件監聽這個事件‘connect’，監聽方式跟普通原生的事件一模一樣，也是用?v-on?指令，縮寫用@符號。?我們采用縮寫來監聽：

<div id="app">
??? <son @connect="say"></son>
</div>

我們設置了事件connect觸發的處理程序是一個say( )方法，我們補上say( )方法的定義：

const app = new Vue({
??? el:"#app",
??? methods:{
??????? say(){
??????????? console.log(`大家好，我監聽到了
?事件connect的觸發`);
??????? }
??? }
});

我們在say( )方法觸發的時候，在控制臺打印一句話，表示我們自定義的事件connect成功觸發，并被父組件監聽到了。

( gif演示圖，加載需要點時間 )

我們看到了，點擊子組件的按鈕，成功地調用了父組件的say( )方法，十分順利。

來到這里，其實我們已經完成了一大半。我們最后只需要把子組件的一些數據，通過這個事件connect傳遞到父組件，就可以實現子→父組件的通信。

我們修改一下子組件：

Vue.component('son',{
??? template:`<button @click="send">
? ? ? ? ? ? ? ?點擊
? ? ? ? ? ? ? </button>`,
??? data(){
??????? return{
??????????? msg:'大家好，我是子組件的數據'
??????? }
??? },
??? methods:{
??????? send(){
??????????? this.$emit('connect',this.msg);
??????? }
??? }
});

我們把子組件的data中的msg，通過$emit()一并發射出來，在父組件的say( )方法接收即可。

methods:{
??? say(msg){
??????? console.log(msg);
??? }
}

最后還是確認一下是否真的可以讀取到子組件出來的msg，看效果圖：

( gif演示圖，加載需要點時間 )

這就成功地實現了子→父組件的數據傳遞。

非父子組件通信

除了父子組件的相互通信，非父子關系的組件該如何通信，我們可以巧妙地利用一個空的vue實例來作為一個中央事件總線。

但是在實際開發中，我們不會這么做，我們會使用專門用于狀態管理的?vuex?，?vuex?的學習我們不在基礎系列講解，我們放在后期的進階系列再一起學習。

本節小結

掌握父→子組件、子→父組件之間的通信，在接下來的實戰中將會非常有用。

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

總結

以上是生活随笔為你收集整理的第十节：实现vue组件之间的通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。