Question

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

我尝试通过添加新的Child来向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：未定义$”

Answer 1

尝试为元素提供id="widgets"这样的ID，并使用el: '#widgets'-似乎可以在this codepen中使用

您还可以向这样的元素添加ref

<div ref="widgets">

然后

el: this.$refs.widgets,

获取ReferenceError的原因可能是因为您尚未导入JQuery

如何动态添加带有父Vue组件的Vue组件？

1 个答案: