vue中有哪些組件通信方式

這篇文章將為大家詳細講解有關vue中有哪些組件通信方式，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

1. props和$emit

這是最最常用的父子組件通信方式，父組件向子組件傳遞數據是通過prop傳遞的，子組件傳遞數據給父組件是通過$emit觸發事件來做到的。 實例：

父組件

Vue.component('parent',{  template:`  <div>  <p>父組件</p>  <child :message="message" v-on:getChildData="getChildData"></child>  </div>  `,  data(){  return {  message:'Hello web秀'  }  },  methods:{  //執行子組件觸發的事件  getChildData(val){  console.log(val)  }  } }) var app=new Vue({  el:'#app',  template:`  <div>  <parent></parent>  </div>  ` })

子組件

Vue.component('child',{  //得到父組件傳遞過來的數據  props:['message'],  data(){  return {  myMessage: this.message  }  },  template:`  <div>  <input type="text" v-model="myMessage" @input="passData(myMessage)">   </div>  `,  methods:{  passData(val){  //觸發父組件中的事件  this.$emit('getChildData',val)  }  } })

解析：

• 父組件傳遞了message數據給子組件，并且通過v-on綁定了一個getChildData事件來監聽子組件的觸發事件;

• 子組件通過props得到相關的message數據,***通過this.$emit觸發了getChildData事件。

2. $attrs和$listeners

***種方式處理父子組件之間的數據傳輸有一個問題：如果多層嵌套，父組件A下面有子組件B，組件B下面有組件C,這時如果組件A想傳遞數據給組件C怎么辦呢?

如果采用***種方法，我們必須讓組件A通過prop傳遞消息給組件B，組件B在通過prop傳遞消息給組件C;要是組件A和組件C之間有更多的組件，那采用這種方式就很復雜了。從Vue  2.4開始，提供了$attrs和$listeners來解決這個問題，能夠讓組件A之間傳遞消息給組件C。

C組件

Vue.component('C',{  template:`  <div>  <input type="text" v-model="$attrs.messageC" @input="passCData($attrs.messageC)">  </div>  `,  methods:{  passCData(val){  //觸發父組件A中的事件  this.$emit('getCData',val)  }  } })

B組件

Vue.component('B',{  data(){  return {  myMessage:this.message  }  },  template:`  <div>  <input type="text" v-model="myMessage" @input="passData(myMessage)">  <C v-bind="$attrs" v-on="$listeners"></C>  </div>  `,  //得到父組件傳遞過來的數據  props:['message'],  methods:{  passData(val){  //觸發父組件中的事件  this.$emit('getChildData',val)  }  } })

A組件

Vue.component('A',{  template:`  <div>  <p>this is parent compoent!</p>  <B   :messageC="messageC"   :message="message"   v-on:getCData="getCData"   v-on:getChildData="getChildData(message)">  </B>  </div>  `,  data(){  return {  message:'Hello',  messageC:'Hello c'  }  },  methods:{  getChildData(val){  console.log('這是來自B組件的數據')  },  //執行C子組件觸發的事件  getCData(val){  console.log("這是來自C組件的數據："+val)  }  } }) var app=new Vue({  el:'#app',  template:`  <div>  <A></A>  </div>  ` })

解析：

• C組件中能直接觸發getCData的原因在于 B組件調用C組件時 使用 v-on 綁定了$listeners 屬性

• 通過v-bind 綁定$attrs屬性，C組件可以直接獲取到A組件中傳遞下來的props(除了B組件中props聲明的)

3. v-model

父組件通過v-model傳遞值給子組件時，會自動傳遞一個value的prop屬性，在子組件中通過this.$emit(‘input',val)自動修改v-model綁定的值

子組件

Vue.component('child',{  props:{  //v-model會自動傳遞一個字段為value的prop屬性  value: String,   },  data(){  return {  myMessage:this.value  }  },  methods:{  changeValue(){  //通過如此調用可以改變父組件上v-model綁定的值  this.$emit('input',this.myMessage);  }  },  template:`  <div>  <input   type="text"   v-model="myMessage"   @change="changeValue">  </div>  ` })

父組件

Vue.component('parent',{  template:`  <div>  <p>this is parent compoent!</p>  <p>{{message}}</p>  <child v-model="message"></child>  </div>  `,  data(){  return {  message:'Hello'  }  } }) var app=new Vue({  el:'#app',  template:`  <div>  <parent></parent>  </div>  ` })

4. provide和inject

父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限于只能從當前父組件的prop屬性來獲取數據，只要在父組件的生命周期內，子組件都可以調用。

子組件

Vue.component('child',{  inject:['for'],//得到父組件傳遞過來的數據  data(){  return {  myMessage: this.for  }  },  template:`  <div>  <input type="tet" v-model="myMessage">  </div>  ` })

父組件

Vue.component('parent',{  template:`  <div>  <p>this is parent compoent!</p>  <child></child>  </div>  `,  provide:{  for:'test'  },  data(){  return {  message:'Hello'  }  } }) var app=new Vue({  el:'#app',  template:`  <div>  <parent></parent>  </div>  ` })

5. 中央事件總線

上面方式都是處理的父子組件之間的數據傳遞，那如果兩個組件不是父子關系呢?也就是兄弟組件如何通信?

這種情況下可以使用中央事件總線的方式。新建一個Vue事件bus對象，然后通過bus.$emit觸發事件，bus.$on監聽觸發的事件。

Vue.component('brother1',{  data(){  return {  myMessage:'Hello brother1'  }  },  template:`  <div>  <p>this is brother1 compoent!</p>  <input type="text" v-model="myMessage" @input="passData(myMessage)">  </div>  `,  methods:{  passData(val){  //觸發全局事件globalEvent  bus.$emit('globalEvent',val)  }  } }) Vue.component('brother2',{  template:`  <div>  <p>this is brother2 compoent!</p>  <p>brother1傳遞過來的數據：{{brothermessage}}</p>  </div>  `,  data(){  return {  myMessage:'Hello brother2',  brothermessage:''  }  },  mounted(){  //綁定全局事件globalEvent  bus.$on('globalEvent',(val)=>{  this.brothermessage=val;  })  } }) //中央事件總線 var bus=new Vue(); var app=new Vue({  el:'#app',  template:`  <div>  <brother1></brother1>  <brother2></brother2>  </div>  ` })

6. parent和children

Vue.component('child',{     props:{       value:String, //v-model會自動傳遞一個字段為value的prop屬性     },     data(){       return {         mymessage:this.value       }     },     methods:{       changeValue(){         this.$parent.message = this.mymessage;//通過如此調用可以改變父組件的值       }     },     template:`       <div>         <input type="text" v-model="mymessage" @change="changeValue">       </div>   })   Vue.component('parent',{     template:`       <div>         <p>this is parent compoent!</p>         <button @click="changeChildValue">test</button >         <child></child>       </div>     `,     methods:{       changeChildValue(){         this.$children[0].mymessage = 'hello';       }//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力     },     data(){       return {         message:'hello'       }     }   })   var app=new Vue({     el:'#app',     template:`       <div>         <parent></parent>       </div>     `   })

7. boradcast和dispatch

vue1.0中提供了這種方式，但vue2.0中沒有，但很多開源軟件都自己封裝了這種方式，比如min ui、element ui和iview等。  比如如下代碼，一般都作為一個mixins去使用,  broadcast是向特定的父組件，觸發事件，dispatch是向特定的子組件觸發事件，本質上這種方式還是on和on和emit的封裝，但在一些基礎組件中卻很實用。

function broadcast(componentName, eventName, params) {  this.$children.forEach(child => {  var name = child.$options.componentName;  if (name === componentName) {  child.$emit.apply(child, [eventName].concat(params));  } else {  broadcast.apply(child, [componentName, eventName].concat(params));  }  }); } export default {  methods: {  dispatch(componentName, eventName, params) {  var parent = this.$parent;  var name = parent.$options.componentName;  while (parent && (!name || name !== componentName)) {  parentparent = parent.$parent;  if (parent) {  name = parent.$options.componentName;  }  }  if (parent) {  parent.$emit.apply(parent, [eventName].concat(params));  }  },  broadcast(componentName, eventName, params) {  broadcast.call(this, componentName, eventName, params);  }  } };

8. vuex處理組件之間的數據交互

如果業務邏輯復雜，很多組件之間需要同時處理一些公共的數據，這個時候才有上面這一些方法可能不利于項目的維護，vuex的做法就是將這一些公共的數據抽離出來，然后其他組件就可以對這個公共數據進行讀寫操作，這樣達到了解耦的目的。

關于vue中有哪些組件通信方式就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。