8种vue组件通讯方式详细解析实例

对于vue来讲，组件是很是常见的，有不少平台都封装了了属于本身一套的组件，如element ui、we ui等等。同时组件之间的消息传递也是很是重要的，下面是我对组件之间消息传递的各类方式的总结，共有8种方式。若有不足之处，能够留言补充，互相学习。

1. props和$emit

这是最最经常使用的父子组件通讯方式，父组件向子组件传递数据是经过prop传递的，子组件传递数据给父组件是经过$emit触发事件来作到的。 实例：

父组件

1. Vue.component('parent',{ 
2.  template:` 
3.  <div> 
4.  <p>父组件</p> 
5.  <child :message="message" v-on:getChildData="getChildData"></child> 
6.  </div> 
7.  `, 
8.  data(){ 
9.  return { 
10.  message:'Hello web秀' 
11.  } 
12.  }, 
13.  methods:{ 
14.  //执行子组件触发的事件 
15.  getChildData(val){ 
16.  console.log(val) 
17.  } 
18.  } 
19. }) 
20. var app=new Vue({ 
21.  el:'#app', 
22.  template:` 
23.  <div> 
24.  <parent></parent> 
25.  </div> 
26.  ` 
27. }) 

子组件

1. Vue.component('child',{ 
2.  //获得父组件传递过来的数据 
3.  props:['message'], 
4.  data(){ 
5.  return { 
6.  myMessage: this.message 
7.  } 
8.  }, 
9.  template:` 
10.  <div> 
11.  <input type="text" v-model="myMessage" @input="passData(myMessage)">  
12.  </div> 
13.  `, 
14.  methods:{ 
15.  passData(val){ 
16.  //触发父组件中的事件 
17.  this.$emit('getChildData',val) 
18.  } 
19.  } 
20. }) 

解析：

• 父组件传递了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组件

1. Vue.component('C',{ 
2.  template:` 
3.  <div> 
4.  <input type="text" v-model="$attrs.messageC" @input="passCData($attrs.messageC)"> 
5.  </div> 
6.  `, 
7.  methods:{ 
8.  passCData(val){ 
9.  //触发父组件A中的事件 
10.  this.$emit('getCData',val) 
11.  } 
12.  } 
13. }) 

B组件

1. Vue.component('B',{ 
2.  data(){ 
3.  return { 
4.  myMessage:this.message 
5.  } 
6.  }, 
7.  template:` 
8.  <div> 
9.  <input type="text" v-model="myMessage" @input="passData(myMessage)"> 
10.  <C v-bind="$attrs" v-on="$listeners"></C> 
11.  </div> 
12.  `, 
13.  //获得父组件传递过来的数据 
14.  props:['message'], 
15.  methods:{ 
16.  passData(val){ 
17.  //触发父组件中的事件 
18.  this.$emit('getChildData',val) 
19.  } 
20.  } 
21. }) 

A组件

1. Vue.component('A',{ 
2.  template:` 
3.  <div> 
4.  <p>this is parent compoent!</p> 
5.  <B  
6.  :messageC="messageC"  
7.  :message="message"  
8.  v-on:getCData="getCData"  
9.  v-on:getChildData="getChildData(message)"> 
10.  </B> 
11.  </div> 
12.  `, 
13.  data(){ 
14.  return { 
15.  message:'Hello', 
16.  messageC:'Hello c' 
17.  } 
18.  }, 
19.  methods:{ 
20.  getChildData(val){ 
21.  console.log('这是来自B组件的数据') 
22.  }, 
23.  //执行C子组件触发的事件 
24.  getCData(val){ 
25.  console.log("这是来自C组件的数据："+val) 
26.  } 
27.  } 
28. }) 
29. var app=new Vue({ 
30.  el:'#app', 
31.  template:` 
32.  <div> 
33.  <A></A> 
34.  </div> 
35.  ` 
36. }) 

解析：

• 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绑定的值

子组件

1. Vue.component('child',{ 
2.  props:{ 
3.  //v-model会自动传递一个字段为value的prop属性 
4.  value: String,  
5.  }, 
6.  data(){ 
7.  return { 
8.  myMessage:this.value 
9.  } 
10.  }, 
11.  methods:{ 
12.  changeValue(){ 
13.  //经过如此调用能够改变父组件上v-model绑定的值 
14.  this.$emit('input',this.myMessage); 
15.  } 
16.  }, 
17.  template:` 
18.  <div> 
19.  <input  
20.  type="text"  
21.  v-model="myMessage"  
22.  @change="changeValue"> 
23.  </div> 
24.  ` 
25. }) 

父组件

1. Vue.component('parent',{ 
2.  template:` 
3.  <div> 
4.  <p>this is parent compoent!</p> 
5.  <p>{{message}}</p> 
6.  <child v-model="message"></child> 
7.  </div> 
8.  `, 
9.  data(){ 
10.  return { 
11.  message:'Hello' 
12.  } 
13.  } 
14. }) 
15. var app=new Vue({ 
16.  el:'#app', 
17.  template:` 
18.  <div> 
19.  <parent></parent> 
20.  </div> 
21.  ` 
22. }) 

4. provide和inject

父组件中经过provider来提供变量，而后在子组件中经过inject来注入变量。不论子组件有多深，只要调用了inject那么就能够注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件均可以调用。

子组件

1. Vue.component('child',{ 
2.  inject:['for'],//获得父组件传递过来的数据 
3.  data(){ 
4.  return { 
5.  myMessage: this.for 
6.  } 
7.  }, 
8.  template:` 
9.  <div> 
10.  <input type="tet" v-model="myMessage"> 
11.  </div> 
12.  ` 
13. }) 

父组件

1. Vue.component('parent',{ 
2.  template:` 
3.  <div> 
4.  <p>this is parent compoent!</p> 
5.  <child></child> 
6.  </div> 
7.  `, 
8.  provide:{ 
9.  for:'test' 
10.  }, 
11.  data(){ 
12.  return { 
13.  message:'Hello' 
14.  } 
15.  } 
16. }) 
17. var app=new Vue({ 
18.  el:'#app', 
19.  template:` 
20.  <div> 
21.  <parent></parent> 
22.  </div> 
23.  ` 
24. }) 

5. 中央事件总线

上面方式都是处理的父子组件之间的数据传递，那若是两个组件不是父子关系呢?也就是兄弟组件如何通讯?

这种状况下可使用中央事件总线的方式。新建一个Vue事件bus对象，而后经过bus.$emit触发事件，bus.$on监听触发的事件。

1. Vue.component('brother1',{ 
2.  data(){ 
3.  return { 
4.  myMessage:'Hello brother1' 
5.  } 
6.  }, 
7.  template:` 
8.  <div> 
9.  <p>this is brother1 compoent!</p> 
10.  <input type="text" v-model="myMessage" @input="passData(myMessage)"> 
11.  </div> 
12.  `, 
13.  methods:{ 
14.  passData(val){ 
15.  //触发全局事件globalEvent 
16.  bus.$emit('globalEvent',val) 
17.  } 
18.  } 
19. }) 
20. Vue.component('brother2',{ 
21.  template:` 
22.  <div> 
23.  <p>this is brother2 compoent!</p> 
24.  <p>brother1传递过来的数据：{{brothermessage}}</p> 
25.  </div> 
26.  `, 
27.  data(){ 
28.  return { 
29.  myMessage:'Hello brother2', 
30.  brothermessage:'' 
31.  } 
32.  }, 
33.  mounted(){ 
34.  //绑定全局事件globalEvent 
35.  bus.$on('globalEvent',(val)=>{ 
36.  this.brothermessage=val; 
37.  }) 
38.  } 
39. }) 
40. //中央事件总线 
41. var bus=new Vue(); 
42. var app=new Vue({ 
43.  el:'#app', 
44.  template:` 
45.  <div> 
46.  <brother1></brother1> 
47.  <brother2></brother2> 
48.  </div> 
49.  ` 
50. }) 

6. parent和children

1. Vue.component('child',{ 
2.     props:{ 
3.       value:String, //v-model会自动传递一个字段为value的prop属性 
4.     }, 
5.     data(){ 
6.       return { 
7.         mymessage:this.value 
8.       } 
9.     }, 
10.     methods:{ 
11.       changeValue(){ 
12.         this.$parent.message = this.mymessage;//经过如此调用能够改变父组件的值 
13.       } 
14.     }, 
15.     template:` 
16.       <div> 
17.         <input type="text" v-model="mymessage" @change="changeValue"> 
18.       </div> 
19.   }) 
20.   Vue.component('parent',{ 
21.     template:` 
22.       <div> 
23.         <p>this is parent compoent!</p> 
24.         <button @click="changeChildValue">test</button > 
25.         <child></child> 
26.       </div> 
27.     `, 
28.     methods:{ 
29.       changeChildValue(){ 
30.         this.$children[0].mymessage = 'hello'; 
31.       }//在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力 
32.     }, 
33.     data(){ 
34.       return { 
35.         message:'hello' 
36.       } 
37.     } 
38.   }) 
39.   var app=new Vue({ 
40.     el:'#app', 
41.     template:` 
42.       <div> 
43.         <parent></parent> 
44.       </div> 
45.     ` 
46.   }) 

7. boradcast和dispatch

vue1.0中提供了这种方式，但vue2.0中没有，但不少开源软件都本身封装了这种方式，好比min ui、element ui和iview等。 好比以下代码，通常都做为一个mixins去使用, broadcast是向特定的父组件，触发事件，dispatch是向特定的子组件触发事件，本质上这种方式仍是on和on和emit的封装，但在一些基础组件中却很实用。

1. function broadcast(componentName, eventName, params) { 
2.  this.$children.forEach(child => { 
3.  var name = child.$options.componentName; 
4.  if (name === componentName) { 
5.  child.$emit.apply(child, [eventName].concat(params)); 
6.  } else { 
7.  broadcast.apply(child, [componentName, eventName].concat(params)); 
8.  } 
9.  }); 
10. } 
11. export default { 
12.  methods: { 
13.  dispatch(componentName, eventName, params) { 
14.  var parent = this.$parent; 
15.  var name = parent.$options.componentName; 
16.  while (parent && (!name || name !== componentName)) { 
17.  parentparent = parent.$parent; 
18.  if (parent) { 
19.  name = parent.$options.componentName; 
20.  } 
21.  } 
22.  if (parent) { 
23.  parent.$emit.apply(parent, [eventName].concat(params)); 
24.  } 
25.  }, 
26.  broadcast(componentName, eventName, params) { 
27.  broadcast.call(this, componentName, eventName, params); 
28.  } 
29.  } 
30. }; 

8. vuex处理组件之间的数据交互

若是业务逻辑复杂，不少组件之间须要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的作法就是将这一些公共的数据抽离出来，而后其余组件就能够对这个公共数据进行读写操做，这样达到了解耦的目的。

以为不错请点赞支持，欢迎留言或进个人我的群855801563领取【架构资料专题目合集90期】、【BATJTMD大厂JAVA面试真题1000+】，本群专用于学习交流技术、分享面试机会，拒绝广告，我也会在群内不按期答题、探讨。