父组件使用provide传值:
data() {
return {
number: 111
}
},
provide() {
return {
number: this.number
}
}
子组件使用inject接收值:
inject: ['number']
以上的方式,当父组件的number值发生改变后,子组件中接收的number并不会发生变化,也就是不是响应式的;
想要变成响应式:
number用函数方式导出:
provide() {
return {
number: () => this.number
}
}
或者把number放在对象里面,然后使用provide传一个对象过去:
data() {
return {
obj:{
number: 111
}
}
},
provide() {
return {
obj: this.obj
}
}
以上的方式之所以是响应式,是因为对象和函数都属于引用数据类型,实际上传的是引用地址过去,所以当引用数据类型中的数据发生了改变,子组件接收的数据也会发生改变;