免费网站服务器安全软件下载,wordpress单页淘宝客,网站开发者密钥,怎么优化推广自己的网站关于# vue3中响应式依赖注入
场景#xff1a;适合单组件#xff08;多层嵌套组件#xff09;#xff0c;解决父组件的响应式数据能够传递给所有子组件#xff08;包括孙子组件及以下#xff09; 优点#xff1a;数据同步更新#xff0c;并同步渲染视图#xff0c;耦合…关于# vue3中响应式依赖注入
场景适合单组件多层嵌套组件解决父组件的响应式数据能够传递给所有子组件包括孙子组件及以下 优点数据同步更新并同步渲染视图耦合逻辑处理更容易处理更好的开发体验推荐provide/inject 而非 vuex繁琐
// 父组件 script setup
// 创建响应式数据
const parentFormData ref({});
// 依赖数据 - 定义 provide readonly不允许子组件直接修改 parentFormData以免混乱
provide(parentFormData, readonly(parentFormData));// 修改依赖变量 parentFormData 的方法
const changeReactivityReadonlyData (val: any) {// 合并对象Object.assign(parentFormData.value, val);
};
// 依赖函数
provide(changeParentFormData, changeReactivityReadonlyData);const formData reactiveT({id: ,name:
})
// 传递 - 响应式, reactive 需要转一层解构才能保持响应式
changeReactivityReadonlyData({ ...toRefs(formData) });// 子组件 script setup
// 定义any 是为了防止 parentFormData.value ts提示可以研究一下 InjectionKey 的做法
const parentFormData: any inject(parentFormData);
const changeParentFormData: any inject(changeParentFormData);
const subFormData refT({age:
})// 传递响应式, ref 需要 .value 在转一层 保持响应式
changeParentFormData(toRefs(formData.value));
