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

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

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> 
 ` 
}) 

（编辑：ASP站长网）