基本使用方式:
const s = Symbol()
export default {
provide: {
foo: 'foo',
[s]: 'bar'
}
}
使用函数可以提供其组件中的状态:
export default {
data() {
return {
msg: 'foo'
}
}
provide() {
return {
msg: this.msg
}
}
}
上面这个例子,供给的 msg 不是响应式的
Vue祖孙组件通过provide/inject异步传值,孙组件拿不到数据如何解决?
![](https://img.haomeiwen.com/i18883049/cba28b6fee030c5f.png)
原因和解决方法
- 因为在父组件异步获取数据前,tableData的空值就已传给了孙组件(详情查看父子组件生命周期执行顺序,其次异步调用在最后执行)
- 在异步调用结束后,又因为provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
说人话就是如果你把对象都改了那这个改动就追踪不到了,如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。
解决思路: 将实际想获取的数组包裹在对象中作为对象的属性传递,也就是tableData.list,将整个tableData传过去,tableData.list的改变可以被响应。
// parent.vue
data () {
tableData: {
list: []
}
},
provide () {
return {
tableData: this.tableData
}
},
methods:{
getTableData(){
axios.get("url")
.then((res) => {
this.tableData.list = res.data.tableData;
console.log("我是爷组件:", this.tableData.list);
});
},
}
// child.vue
...
inject: ['taleData']
...
<el-table :data="tableData.list">
网友评论