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

（编辑：西安站长网）

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