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

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!