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。

（编辑：南京站长网）

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