这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
provide
选项应该是一个对象或返回一个对象的函数。
inject
选项应该是一个字符串数组,或一个对象。
记录具有响应能力的provide
/inject
// 父组件
data() {
return {
userItem: {
id: ''
}
}
},
provide() {
return {
user: this.userItem
}
},
methods: {
handleSelect(object) {
this.userItem.id = object.id
},
}
// 子组件
inject: ['user'],
watch: {
user: {
immediate: true,
handler: 'table_getdata',
deep: true
}
},
inject: ['user'],
methods: {
// 表格请求数据
table_getdata({ id }) {
console.warn('tis')
console.log(id)
}
}
// 孙组件
inject: ['user'],
methods: {
gtetabledata() {
console.log(this.user.id)
}
注意点:
1. 如果userItem不使用对象,直接使用userItem:‘id’,这种不具有响应能力
2. 子组件中watch需要加deep才能监听到