Vue 組件通信
阿新 • • 發佈：2018-07-25
template eth button result 格式 res 傳遞 標簽 json格式 今天學習了，vue組件通信本篇隨筆主要對今天的學習成果進行總結。有什麽不對的地方還望諒解！
首先，Vue的核心即組件化開發，所以組件通信就顯得十分重要。
組件通訊包括：父子組件間的通信和兄弟組件間的通信。
1.子組件獲取父組件中數據間：
var Child={
template:"#child",
props:[‘mes‘],
data:function(){
return {
data:this.$props.mes, //調用該子組件 props 中的對應屬性的屬性值；
}
}
通過props將所需該子組件的屬性名進行保存，vue自動將其連同屬性值打包成json格式保存在 this.$props 中。
那麽當子組件以標簽形式插入父組件模板時，子組件即可通過 v-bind 綁定屬性的形式獲取父組件中的數據。
2.父組件獲取子組件中數據：
通過 ref 綁定子組件名，子組件的數據將會被保存在 this.$refs 中,所以在父組件中通過 this.$refs.Child 獲取Child組件中的數據。
3.用戶操作觸發，子組件獲取父組件數據：
var Head={
template:"#child",
data:{
meg:"hello!"
},
methods:{
fn:function(){
this.$emit(‘event‘,this.meg) //觸發自定義事件 傳遞數據
}
}
}
通過子組件中的button按鈕觸發自定義事件 event 從而傳遞child中的meg數據；
在父組件的標簽中加入自定義事件 event 來接收參數
methods:{
result:function(res){
this.mes=res;
}
},
事件event觸發後，執行父組件中的result方法，形參即為接受到的子組件中數據。
Vue 組件通信