如何给VUE组件动态生成name？

Z时代
2024-02-29
分类：IT

如何给VUE组件动态生成name？

项目中遇到得问题是切换列表->详情->列表时候，不让刷新。列表不刷新，详情也不刷新。

我们使用 keepalive 保证缓存。但是新的问题出现了。

有多个列表菜单，listA -> detailA , listB -> detailB 由于 detailA 与 detailB 基本类似，则detail为公用组件。

但是现在因为缓存问题，我需要给 detail 命名 name，缓存是通过 name 来找得，但是由于公用问题，命名必须保证唯一，

我想到的就是将 detail 文件复制出来，成为 detailA 和 detailB，但是项目中有六七个页面公用组件得现象。

能否将 detail 得 name 设置成动态得，这样减少代码重复与工作量

求教大神，这种情况下怎么弄？

  {
    path: 'a/detail',
    name: 'detail',
    component: () => import('../views/Page/detail.vue'),
    meta: { title: '机构详情',},
  },
  {
    path: 'b/detail2',
    name: 'detail2',
    component: () => import('../views/Page/detail.vue'),
    meta: { title: '机构详情',},  },

两个路由，但是是公用得同一个组件。
在这个组件中我只能写一个 name 这样就不能查找到对应得东西了

// 组件中name 我只能写一个，如何才能写多个，或者写成动态
export default {
  name: 'detail',
  data() {
    return {
      msg：'111'
    }
  },}

回答：

遇到相同的问题请教大佬后得知：
可以把detail整体封装成一个组件，然后在detailA和detailB的路由组件中分别引入，这样detailA和detailB就可以使用不同的name值了。解决方案和楼主类似，但至少修改的时候省点事

// detailA或者detailB的路由组件
<template>
  <detail></detail>
</template>
<script>
import detail from '@/components/common/detail.vue';
export default {
  name: 'detailA,
  components: {
    detail,
  },
};</script>

回答：

{
  path: '/dashboard/analysis',
  name: 'Analysis1',
  component: createCustomComponent('Analysis1', import('@/views/dashboard/Analysis')),
  meta: {
    title: '分析页'
  },}

/**
 * 将指定组件设置自定义名称
 *
 * @param {String} name 组件自定义名称
 * @param {Component | Promise<Component>} component
 * @return {Component}
 */
export function createCustomComponent (name, component) {
  return {
    name,
    data () {
      return { component: null }
    },
    async created () {
      if (component instanceof Promise) {
        try {
          const module = await component
          this.component = module?.default
        } catch (error) {
          console.error(`can not resolve component ${name}, error:`, error)
        }
        return
      }
      this.component = component
    },
    render (h) {
      return this.component ? h(this.component) : null
    },
  }}

回答：

你这写得估计只有自己看得懂。。。
如果是使用的时候重命名的话只需要重新声明一个变量就行了：

import Name from 'xxx.vue';const NewName = Name;

或者在注册组件的时候重命名：

import Name from 'xxx.vue';
{
  components: {
    NewName: Name 
  }}

回答：

手动控制keep-alive的缓存策略，用路由信息代替name作为唯一标识

例子1
例子2

回答：

只是页面组件和路由信息绑定的话，这个方法简单点，但是这个只能在加载组件时修改一次

function registerComponentName(componentName, component) {
  return () => {
    return component().then(res => {
      res.default.name = componentName
      return res
    })
  }}

回答：

针对VUE3.x的解决方案（我自己的项目就是这样解决的），创建 createCustomComponent.jsx 文件：

import { defineComponent } from 'vue';
/**
 * 将指定组件设置自定义名称
 *
 * @param {String} name 组件自定义名称
 * @param {AsyncComponent} component
 * @return {Component}
 */
export default function createCustomComponent(customName, asyncComponent) {
    return defineComponent({
        name: customName,
        components: {
            AsyncComponent: asyncComponent,
        },
        setup() {
            return () => {
                return <AsyncComponent />;
            };
        },
    });}

注册路由的时候要配合vue3的 defineAsyncComponent 方法

import { defineAsyncComponent } from 'vue';
import createCustomComponent from './createCustomComponent.jsx';
...
{
   path: path,
   name: name,
   // component: () => import('@/views/TemplateView.vue'),
   component: createCustomComponent(name, defineAsyncComponent(() => import('@/views/TemplateView.vue'))),
   props: true}

使用defineAsyncComponent引入的TemplateView.vue是公用页面，这样就给公用页面包了一层壳，加上了自定义的名字。