Vue 組件通訊

今天寫一下組件通訊，總結一下對組件通訊的理解

組件通訊分爲：一、父子通訊 二、子父通訊 三、非父子通訊

一、子父通訊

　　子父通訊主要用到 props屬性

a）在子組件中添加props屬性

{
  props：{
    type：數據類型  
   }      
}

b)在子模板中直接使用props（和使用data同樣）

c）在父組件的組件模板中找到子組件標籤，添加屬性：

<子組件標籤 ：自定義props名字="父組件中的data中的值"></子組件標籤>

二、子父通訊

a)在子組件中找到對應的元素添加相關事件，在事件函數中觸發自定義事件

{
    methods：{
        函數名（）{
             this.$emit('自定義事件名'，數據)
        }  
    }
}

b)在父組件methods中添加函數

{
   methods：{
     函數（data）{
        data就是$meit傳來數據
     }
   }
}

c）在父組件組件模板中找到子組件標籤添加自定義事件

<子組件標籤 @自定義事件名="父組件中的函數名"></子組件標籤>

三、非父子通訊

a)建立一個公共的實例（選一一個便可）

const bus = new Vue()

b)在發送數據的組件中的對應的元素上添加事件

@click="函數名"   //函數中觸發自定義事件

{
  methods：{
     函數名：{
       bus.$emit('自定義事件名'，數據) 
    }
  }  
}

c)在接受數據的組件中添加created，而後監聽事件的觸發

created（）{
  bus.$on('自定義事件名'，（data）=>{
     data就是傳來的數據  
   })  
}