vue3 component 动态组件和动态ref

原创于 2025-02-21 09:32:07 发布 · 689 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

收录于

<component v-if="activeName===item.name" :ref="(el:any) => setDynamicRef(el, item.name)"  :is="com_path(item.path)"></component>

const com_path = computed(() => {
  return (e) => {
    // noinspection JSCheckFunctionSignatures
    return defineAsyncComponent({
      loader: () => import(/* @vite-ignore */`./${e}.vue`)
    });
  }
})

// 一个对象来存储动态的 ref
const dynamicRefs = reactive({});

// 函数用于设置动态 ref
const setDynamicRef=(el: any, name: string)=> {
  dynamicRefs[name + 'Ref'] = el;
}

这样就可以根据子组件 defineExpose 暴露的方法，获取子组件的变量值和函数

const refInstance = dynamicRefs[name + 'Ref'];


console.log(refInstance.getValue()); // 打印组件实例或 DOM 元素

不过变量采用defineProps绑定的方式设置

如果动态组件外面增加了

<keep-alive></keep-alive>
:is="com_path(activeName)"就要写成:is="tabComponents[com_path(item.path)

const tabComponents = {}

const com_path = computed(() => {
  return (e: any) => {
    // noinspection JSCheckFunctionSignatures
 
    if (tabComponents['com' + e] === undefined) {
      tabComponents['com' + e] = defineAsyncComponent({
        loader: () => import(/* @vite-ignore */ (`./components/${item.path}.vue`))
      })
    }
    return 'com' + e
  }
})