vue3中使用依赖注入数组,在父子组件祖孙组件间传值
2024-01-02 15:57:49
? ? ? ? 项目中使用到在父子组件中使用依赖注入来保持数据,开始直接使用了数组,在修改数组的方法时,直接赋值数组,导致丢失了响应,重新整理实现代码如下:
1.在types文件中,实现依赖注入的方法:
export type CurrentList ={
list: Array<any>;
};
export const SYMBOL_LIST = Symbol("List") as InjectionKey<CurrentList>;
export const useInjectList = () => {
return inject(SYMBOL_LIST)!;
};
export const useProvideList = (list:CurrentList) => {
const value = reactive(list);
provide(SYMBOL_COMMENTLIST, value);
return value;
};
export type ChangeList = (list:Array<any>) => void
export const SYMBOL_CHANGELIST = Symbol("changeList") as InjectionKey<ChangeList>;
export const useInjectChangeList = () => {
return inject(SYMBOL_CHANGELIST)!;
};
export const useProvideChangeList = (fn:ChangeList) => {
const value = reactive(fn);
provide(SYMBOL_CHANGELIST, value);
return value;
};
2. 父组件实现依赖:
import { useProvideChangeList, useProvideList} from './utils/taskTypes'
let list: any[] = [];
const currentList = reactive({
list:list
});
useProvideList(currentList);
const changeListFun = (list:any) => {
changeRefList(list);
};
useProvideChangeList(changeListFun);
const changeRefList = (list:any[])=>{
...
currentList.list=list
}
3. 子组件中,需要列表或者使用修改列表的方法则使用一下代码:
import { useInjectChangeList, useInjectList} from './utils/taskTypes'
// 使用列表
const refList=useInjectList();
// 修改列表的方法
const changeRefList=useInjectChangeList();
// 列表使用比如:
<a v-for="item in refList.list" :key="item.id">{{item.title}}</a>
// 在某处要修改数组则比如:
changeRefList(newList)
可能多个子组件或者子子组件需要该列表,或者需要修改该列表,则可以直接使用该上述方法。
文章来源:https://blog.csdn.net/reembarkation/article/details/135339828
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!