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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。