如何使用父 Vue 组件动态添加 Vue 组件？答案

【问题标题】：How add dynamically Vue components with a parent Vue component?如何使用父 Vue 组件动态添加 Vue 组件？
【发布时间】：2019-10-06 13:20:23
【问题描述】：

我尝试使用父 Vue 组件创建动态 Vue 组件，但是没有创建动态组件，

我尝试通过添加新子项将动态组件添加到 HTML，但没有工作，

<template>
  <div class="app-body row">
    <div class="widgets">
      <h1>new ems</h1>

      <div id="Device"><p>ems</p></div>

    </div>
  </div>
</template>

<script>
import { Component, Vue, Watch } from "vue-property-decorator";

export default {

created() {
    console.log('created');
this.displayWidget('Device');
},
methods:{
displayWidget(which) {
    let Child = Vue.extend({
        name: which,
        parent: this,

    });
    new Child({
        el: $(this.$el).find('.widgets')[0],
        template: '<div style="height: 200px; width: 200px; color: yellow">Hello</div>', // tried just standard template stuff here
        render: h => h('div')
    }).$mount();
    }
    }
    }

   </script>

我得到错误： [Vue 警告]：创建钩子时出错：“ReferenceError: $ 未定义”

【问题讨论】：

$ 是 jquery ：似乎 jquery 没有被导入或引用......

标签： javascript vue.js

【解决方案1】：

尝试给元素一个像 id="widgets" 这样的 id 并使用 el: '#widgets' - 似乎在 this codepen 中工作

您也可以像这样向元素添加ref

<div ref="widgets">

然后

el: this.$refs.widgets,

你得到ReferenceError的原因可能是因为你没有导入JQuery

【讨论】：

现在我得到另一个错误：找不到元素：#widgets，我也尝试你的例子