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

解析：

• 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. 中央事件总线

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

（编辑：厦门网）

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