Vue3 使用inject 获取provide 发布的响应式数据动态更新失败问题解决

在日常开发过程中，有时候会碰到使用inject 获取父组件provide发布的响应式数据，当修改父组件provide 绑定的响应式数据源时，子组件使用Inject获取的数据并没有更新。当父组件执行一些修改state.demoData 变量的代码逻辑时，子组件中的demoData 并没有发生变化。可以在父组件使用provide 的地方将绑定的变量用computed 包裹一下。这样在子组件中使用inj

梦凡尘

695人浏览 · 2024-12-03 20:34:13

梦凡尘 · 2024-12-03 20:34:13 发布

1，问题概述

在日常开发过程中，有时候会碰到使用inject 获取父组件provide发布的响应式数据，当修改父组件provide 绑定的响应式数据源时，子组件使用Inject获取的数据并没有更新。

2，解决方法

father.vue

const state = reactive({
    demoData:'',    // provide 要发布的数据变量
})

provide('demoData', state.demoData)


children.vue

const demoData = inject('demoData');

当父组件执行一些修改state.demoData 变量的代码逻辑时，子组件中的demoData 并没有发生变化。

可以在父组件使用provide 的地方将绑定的变量用computed 包裹一下

provide('demoData',computed(()=>state.demoData))

这样在子组件中使用inject 获取的数据也会跟着发生变化；