设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 重新 试卷 文件
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

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

发布时间:2019-04-10 17:39 所属栏目:21 来源:web秀
导读:解析: C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) 3. v-model 父

解析:

  • 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绑定的值

子组件

  1. Vue.component('child',{ 
  2.  props:{ 
  3.  //v-model会自动传递一个字段为value的prop属性 
  4.  value: String,  
  5.  }, 
  6.  data(){ 
  7.  return { 
  8.  myMessage:this.value 
  9.  } 
  10.  }, 
  11.  methods:{ 
  12.  changeValue(){ 
  13.  //通过如此调用可以改变父组件上v-model绑定的值 
  14.  this.$emit('input',this.myMessage); 
  15.  } 
  16.  }, 
  17.  template:` 
  18.  <div> 
  19.  <input  
  20.  type="text"  
  21.  v-model="myMessage"  
  22.  @change="changeValue"> 
  23.  </div> 
  24.  ` 
  25. }) 

父组件

  1. Vue.component('parent',{ 
  2.  template:` 
  3.  <div> 
  4.  <p>this is parent compoent!</p> 
  5.  <p>{{message}}</p> 
  6.  <child v-model="message"></child> 
  7.  </div> 
  8.  `, 
  9.  data(){ 
  10.  return { 
  11.  message:'Hello' 
  12.  } 
  13.  } 
  14. }) 
  15. var app=new Vue({ 
  16.  el:'#app', 
  17.  template:` 
  18.  <div> 
  19.  <parent></parent> 
  20.  </div> 
  21.  ` 
  22. }) 

4. provide和inject

父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。

子组件

  1. Vue.component('child',{ 
  2.  inject:['for'],//得到父组件传递过来的数据 
  3.  data(){ 
  4.  return { 
  5.  myMessage: this.for 
  6.  } 
  7.  }, 
  8.  template:` 
  9.  <div> 
  10.  <input type="tet" v-model="myMessage"> 
  11.  </div> 
  12.  ` 
  13. }) 

父组件

  1. Vue.component('parent',{ 
  2.  template:` 
  3.  <div> 
  4.  <p>this is parent compoent!</p> 
  5.  <child></child> 
  6.  </div> 
  7.  `, 
  8.  provide:{ 
  9.  for:'test' 
  10.  }, 
  11.  data(){ 
  12.  return { 
  13.  message:'Hello' 
  14.  } 
  15.  } 
  16. }) 
  17. var app=new Vue({ 
  18.  el:'#app', 
  19.  template:` 
  20.  <div> 
  21.  <parent></parent> 
  22.  </div> 
  23.  ` 
  24. }) 

5. 中央事件总线

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

(编辑:ASP站长网)

网友评论
推荐文章
    热点阅读