如何使用父 Vue 组件动态添加 Vue 组件?

Question

我尝试使用父 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 警告]：创建钩子中的错误："引用错误：$ 未定义">

Answer 1

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

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

<div ref="widgets">

然后

el: this.$refs.widgets,

您获得ReferenceError的原因可能是因为您没有导入 JQuery