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. 中央变乱总线

上面方法都是处理赏罚的父子组件之间的数据转达，那假如两个组件不是父子相关呢?也就是兄弟组件怎样通讯?

（编辑：湖南网）

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