vue父子組件間如何通訊 ？vue父子組件間通訊的四種方法

本篇文章給大家帶來的內容是關於vue父子組件間如何通訊 ？vue父子組件間通訊的四種方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

父子通訊目前有四種方式：

1.父組件傳遞資料給子組件
父組件資料如何傳遞給子組件呢？可以通過props屬性來實現
父組件：

<parent> <child :child-msg="msg"></child>//這裡必須要用 - 代替駝峰</parent>data(){ return { msg: [1,2,3] };}

子組件通過props來接收資料:
方式1：

props: ['childMsg']

方式2 :

props: { childMsg: Array //這樣可以指定傳入的類型，如果類型不對，會警告}props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定預設的值 }}

這樣呢，就實現了父組件向子組件傳遞資料.

2.子組件與父組件通訊
那麼，如果子組件想要改變資料呢？這在vue中是不允許的，因為vue只允許單向資料傳遞，這時候我們可以通過觸發自訂事件來通知父組件改變資料，從而達到改變子組件資料的目的.

使用 v-on 綁定自訂事件
每個 Vue 執行個體都實現了事件介面(Events interface)，即：
使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件

父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

子組件:

<template> <div @click="up"></div></template>methods: { up() { this.$emit('resultChange','hehe'); //主動觸發resultChange方法，'hehe'為向父組件傳遞的資料 }}

父組件:

<div> <child @on-result-change="mychangHandle" :msg="msg"></child> //監聽子組件觸發的upup事件,然後調用change方法</div>methods: { mychangHandle(msg) { this.msg = msg; }}

觸發事件使用駝峰格式的自訂事件名稱，在父組件中就可以使用on-evnet-name的形式來監聽。

3.任意組件間通訊
如果2個組件不是父子組件那麼如何通訊呢？這時可以通過eventHub來實現通訊.
所謂eventHub就是建立一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件.
使用一個空的 Vue 執行個體作為中央事件匯流排：

let Hub = new Vue(); //建立事件中心,注意Hub要放在全域

組件1觸發：

<div @click="eve"></div>methods: { eve() { Hub.$emit('change','hehe'); //Hub觸發事件 }}

組件2接收:

<div></div>created() { Hub.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; });}

4. $refs

儘管有 props 和 events ，但是有時仍然需要在 JavaScript 中直接存取子組件。為此可以使用 ref 為子組件指定一個索引 ID 。

<div id="parent">  <user-profile ref="profile"></user-profile></div>var parent = new Vue({ el: '#parent' })// 訪問子組件var child = parent.$refs.profile

當 ref 和 v-for 一起使用時， ref 是一個數組或對象，包含相應的子組件。