vue组件通信之provide / inject

2019-02-15 本文已影响0人 lesdom

简介

provide / inject 需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。就是说祖先组件使用provide提供数据，所有后代都可以通过inject接收数据。

provide 和 inject 绑定并不是可响应的，当祖先组件改变provide提供的数据后，后代组件接收到的数据不会发生变化，依然是之前的数据。

祖先组件

export default {
  provide: {
    name: 'lee'
  }
}

后代组件

export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // lee
  }
}