Vue中的 provide 和 inject 如何实现响应式传值?
官方文档对于provide和inject的说明:传送门.由文档可以得知,这对选项必须搭配使用才能有效果**使用场景:**当父组件需要给子孙组件共享父组件的数据时,在父组件中通过 provide 返回一个对象,在子孙组件中通过 inject:[key] (key是父组件provide对象绑定的key) ,如此就可以在子孙组件中共享父组件的数据在使用场景中,肯定是希望父组件的数据一旦发生改变,子孙组件
·
官方文档对于provide和inject的说明:传送门.
由文档可以得知,这对选项必须搭配使用才能有效果
**使用场景:**当父组件需要给子孙组件共享父组件的数据时,在父组件中通过 provide 返回一个对象,在子孙组件中通过 inject:[key] (key是父组件provide对象绑定的key) ,如此就可以在子孙组件中共享父组件的数据
在使用场景中,肯定是希望父组件的数据一旦发生改变,子孙组件获取到的也是父组件更新后的数据。那么,怎么实现父组件与子孙组件所绑定的数据动态响应呢?
-------------------parent.vue----------------------
provide(){
return {
// keyName: {name:this.name}, // value 是对象才能实现响应式,也就是引用类型
keyName: this.changeValue // 通过函数的方式也可以[注意,这里是把函数作为value,而不是this.changeValue()]
// keyName: 'test' value 如果是基本类型,就无法实现响应式
}
},
data(){
return {
name:'张三'
}
},
methods: {
changeValue(){
this.name = '改变后的名字-李四'
}
}
-------------grandson.vue-----------------
inject:['keyName']
create(){
console.log(this.keyName) // 改变后的名字-李四
}
更多推荐
已为社区贡献1条内容
所有评论(0)