动态解析 Vue 组件名称答案

【问题标题】：Resolve Vue component names on the fly动态解析 Vue 组件名称
【发布时间】：2019-02-26 13:50:08
【问题描述】：

我正在寻找一种“即时”解析 Vue (sfc) 组件名称的方法。基本上，我从后端获取某种组件名称，并且需要将它们转换为前端的真实组件名称。像这样的：

<text/> => /components/TextElement.vue

或

<component v-bind:is="text"></component> => => /components/TextElement.vue

这个想法是提供一个将后端名称映射到前端名称的全局函数。我不想在使用这些组件的每个地方都这样做，所以也许有一种钩子可以动态更改名称？

非常感谢，鲍里斯

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

您可以创建一个包装器 <component> 来动态映射组件名称和 globally registers 指定的组件。

为<component> 的is 属性创建一个带有prop（例如，命名为“xIs”）的组件：

<script>
export default {
  props: {
    xIs: {
      type: String,
      required: true
    }
  },
};
</script>

添加一个包装<component> 的模板和一个包含映射组件名称（从后端到前端名称）的data 属性（例如，命名为“translatedName”）：
```
<template>
  <component :is="translatedName" />
</template>

<script>
export default {
  data() {
    return {
      translatedName: ''
    }
  }
};
</script>
```

在prop 上添加一个watcher，它将按照prop 值中指示的名称注册组件：

<script>
import componentNames from './component-names.json';

export default {
  watch: {
    xIs: {
      immediate: true, // run handler immediately on current `xIs`
      async handler(value) {
        try {
          const name = componentNames[value];                             // 1. lookup real component name
          if (name) {
            Vue.component(name, () => import(`@/components/${name}`));    // 2. register component
            this.translatedName = name;                                   // 3. set name for <component :is="">
          }
        } catch (e) {
          console.warn(`cannot resolve component name: ${value}`, e);
        }
      }
    }
  }
}
</script>

【讨论】：