Vue.js 父子组件通信的十种方式

当我们在组件上赋予了一个非Prop 声明时，编译之后的代码会把这些个属性都当成原始属性看待，添加到 html 原生标签上，看上面的代码编译之后的样子：

<h2 bar="parent bar">parent foo</h2> 

这样会很丢脸，同时也爆了某些对象。

怎样去掉?

这正是 inheritAttrs 属性的用武之地!

给组件加上这个属性就行了，一样平常是共同 $attrs 行使。

看代码：

// 源码let Child = Vue.extend({  ...  inheritAttrs: false, // 默认是 true  ...}) 

再次编译：

<h2>parent foo</h2> 

5. provide / inject

他俩是对CP, 感受挺隐秘的。

来看下官方对 provide / inject 的描写：

provide 和 inject 首要为高阶插件/组件库提供用例。

并不保举直接用于应用措施代码中。

而且这对选项必要一路行使，以应承一个祖先组件向其全部子孙儿女注入一个依靠，岂论组件条理有多深，并在起上下流相关创立的时刻里始终见效。

看完描写有点懵懵懂懂!

一句话总结就是：小时辰你老爸什么对象都先帮你存着等你长大该娶媳妇儿了你要屋子给你买要车给你买只要他有的只管城市满意你。

下面是这句话的代码表明：

<div id="app">  <son></son></div> 
let Son = Vue.extend({ 
  template: '<h2>son</h2>', 
  inject: { 
    house: { 
      default: '没房' 
    }, 
    car: { 
      default: '没车' 
    }, 
    money: { 
      // 长大事变了固然有点钱 
      // 仅供糊口费，必要向怙恃要 
      default: '￥4500' 
    } 
  }, 
  created () { 
    console.log(this.house, this.car, this.money) 
    // -> '屋子', '车子', '￥10000' 
  } 
}) 
 
new Vue({ 
  el: '#app', 
  provide: { 
    house: '屋子', 
    car: '车子', 
    money: '￥10000' 
  }, 
 
  components: { 
    Son 
  } 
}) 

6. 其他方法通讯

除了以上五种方法外，着实尚有：

• EventBus

思绪就是声明一个全局Vue实例变量 EventBus , 把全部的通讯数据，变乱监听都存储到这个变量上。

这样就到达在组件间数据共享了，有点相同于 Vuex。

但这种方法只合用于极小的项目，伟大项目照旧保举 Vuex。

（编辑：湖南网）

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