Vue中組件之間的通訊
阿新 • • 發佈：2019-03-24
rom 實例 created val 接收 his pre ESS ont
父子通信
1、父傳子
傳遞：當子組件在父組中做標簽使用的時候，通過給子組件綁定一個自定義屬性，值為要傳遞的數據。
父組件中；eg:<One :val="message"/>
接收：在子組件內部通過props進行接收，props接收的方式有兩種。
數組接收： props:["val"] 對象接收： props:{ val:String, //接收數據的數據類型 }， 或是 props:{ val：{ type:String, defaule:"##" //默認值 } }
2、子傳父
傳遞：當子組件給父組件傳遞數據的時候，通過調用父組件給子組件綁定的自定義事件，然後將值傳遞過去。
接收：父組件通過自定義事件的函數來接收子組件傳遞過來的數據（註：這個自定義方法在綁定的時候不需要加（））
父組件給子組件綁定一個自定義方法；<One @handleTo="handleMessage"> 子組件通過this.$emit觸發這個方法； methods:{ handleSend(){ this.$emit("handleTo",需要傳遞的值) } } 父組件接收，通過自定義方法後面的函數接收 methods:{ handleMessage(val){ } }
還可以通過自定義插槽完成子向父傳值
給子組件內部的slot綁定一個自定義屬性
<slot :icon="icon"></slot>
在父組件中，子組件標簽的內部書寫一個template標簽，通過scope來接收子組件傳遞過來的數據
<Movie>
<template scope="
非父子
1、在Vue的原型身上添加一個公共的Vue實例，組件之間調用這個公共的實例$emit傳遞數據，$on接收數據
在入口文件main.js中 Vue.prototype.Observer = new Vue();
傳值：methods:{ handleSend(){ this.Observer.$emit("handle",要傳遞的值) } } 接收：created(){ this.Observer.$on("handle",(val)=>{接收到傳遞過來的值val}) }
2、上面的方法太耗費性能，我們可以直接手動封裝$on、$emit、$off方法，在main.js 中引入 import Observer from ‘ ‘ ；傳遞和接收的方法與上面一樣。
3、Event Bus 4、Vuex
Vue中組件之間的通訊