关于vue3中响应式依赖注入provide/inject

关于# 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 = reactive<T>({
	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 = ref<T>({
	age: ''
})

// 传递响应式, ref 需要 .value 在转一层, 保持响应式
changeParentFormData(toRefs(formData.value));

你可能感兴趣的:(vue.js,javascript,前端)