如何像jsx一样在vue中渲染可变组件？答案

【问题标题】：How to render variable components in vue like jsx?如何像jsx一样在vue中渲染可变组件？
【发布时间】：2020-08-02 12:18:42
【问题描述】：

在 jsx 中，我们可以将组件存储在像 const comp=<p>Hello</p> 这样的变量中，然后我们可以将这些变量放在任何地方，选择要渲染的巫婆组件。

我想知道vue中是否有类似的东西。如果我有这样的模板：

<template>
  <variable-comp />
</template>

我想动态更改 variable-comp 的含义。我知道v-if 和v-for，但这不是一回事。

【问题讨论】：

vuejs github.com/vuejs/jsx 有一个 webpack 插件。有了这个插件，你可以在你的渲染方法中使用 jsx

标签： javascript vue.js

【解决方案1】：

vue 对动态组件使用这种语法

<component v-bind:is=”currentComponent”/>

其中 'currentComponent' 是组件的名称（字符串）。

即

<template>
  <component v-bind:is=”currentComponent”/>
</template>

import CompA from './CompA.vue'
import CompB from './CompB.vue'
export default {
  components: {
    CompA,
    CompB
  },
  data() {
    isA: true
  },
  computed: {
    currentComponent() {
      return isA ? 'CompA' : 'CompB'
    }
  }
}

【讨论】：

也可以直接在Components中定义html，但如果真的只是
标签，最好直接写在上面的Templates中。或者使用 vue 和 jsx：vuejs.org/v2/guide/render-function.html#JSX
其实这个问题出现在我的脑海里是因为我有一百个 SVG 图标需要更改，我知道我可以将它们作为 VUE 组件导入，但是我无法动态更改它，所以我将它们呈现为 HTML。但有时最好更换组件。
这个 SVG 图标会被 img 标签引用吗？您可以创建一个映射图标的 JS 对象，然后根据需要将它们弹出到 src 属性中，而不是使用组件？