vue.js：从字符串创建组件答案

【问题标题】：vue.js: create component from stringvue.js：从字符串创建组件
【发布时间】：2022-01-02 19:04:58
【问题描述】：

我有两个名为 component-1 和 component-2 的组件，以及这个 vue.js 代码：

<template>
   <div id="app">
      <input class="input" @keyup="update()">
      <div class="render"></div>
   </div>
</template>

<script>
export default {
   methods:{
      update () {
         document.querySelector(".render").innerHTML=`<component-${
            document.querySelector(".input").value
         } />`
      }
   }
}
</script>

每当我运行代码时，组件都不会呈现。有没有办法让这个组件渲染？

【问题讨论】：

标签： javascript vue.js dynamic backend vuejs3

【解决方案1】：

这不是在 Vue 中动态渲染组件的正确方法 - 您应该使用 :is

<template>
   <div id="app">
      <input class="input" @keyup="update($event.target.value)">
      <component :is="myComponent"></component>
      </div>
</template>

<script>
export default {
   data() {
     return {
       myComponent: undefined
     }
   },
   methods:{
      update (component) {
         this.myComponent = component
      }
   }
}
</script>

沙盒演示是here

【讨论】：