官网概念:provide/inject需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
使用方法:在父组件中使用provide传值,在子组件中用inject接收
// 父组件 data(){ return { name:'阔落' } }, provide() { return { name:this.name } }
// 子组件 inject:['name']
但是这样传值有个问题,会发现当父组件name值改变时,子组件接收到的name值不会改变,即数据没有响应性。
响应式方法
// 父组件 data(){ return { name:'阔落' } }, provide() { return { newName:()=>this.name } }
// 子组件 inject:['newName'], computed:{ getNewName() { return this.newName() } }
// 子组件中的使用方式 <div>{{getNewName}}</div> // 或者,更推荐使用上一种 <div>{{newName()}}</div>