无法动态创建和添加Vue组件无法装载未定义的组件模板或呈现函数

Question

我已经浏览了许多不同的Stackoverflow帖子，许多帖子都有我的症状，但没有一个解决方案解决我的问题。显然，根据这篇帖子，很多很多事情都会导致这个问题。我决定将我所有的npm、node和vue升级到最新版本，并为我的问题做一个最小的代码示例(Condition组件包含一个模板，该模板带有一个包含3个vuetify文本字段的根div(：

<template>
<div id="app">
<v-btn @click="addCondition()" color="secondary" dark>Add Condition</v-btn>
<div id="conditions">
<template v-for="condition in conditions">
<component :is="condition" :key="condition.id"></component>
</template>
</div>
</div>
</template>
<script>
// none of the below work
//import Condition from '@/components/Condition.vue';
//const Condition = require('@/components/Condition.vue').default
Vue.component('Condition', require('@/components/Condition.vue').default);
import Vue from "vue";
export default {
name: "Test",
components:
{
Condition
},
methods: {
addCondition()
{
const ConditionClass = Vue.extend(Condition);
const conditionInstance = new ConditionClass(); //{ propsData: { id: conditions.length, value: 0 }});
this.conditions.push(conditionInstance);
}
},
data() {
return {
conditions: []
};
}
};
</script>
<style>
</style>

当我点击"添加条件"按钮时，我会得到经常遇到的可怕的"条件"；[Vue warn]：未能装载组件：未定义模板或呈现函数"控制台中的消息。意识到错误可能是由我的配置中的东西引起的，我还将vue项目的所有代码放在https://github.com/mentaloaf/stackoverflow_vuejs.git.由于我在这方面损失了一天，我希望有一个愚蠢/简单的解决办法。

我还认为我会发布相关的工具链版本：

/tmp/comptest/stackoverflow_vuejs master ?1 ❯ vue -V                                                                                                                                                                                                                                        3m 30s
@vue/cli 4.5.12
/tmp/comptest/stackoverflow_vuejs master ?1 ❯ npm -v
7.5.4
/tmp/comptest/stackoverflow_vuejs master ?1 ❯ node -v
v15.9.0

干杯！

Answer 1

问题是，您正在实例化组件并将该实例发送到动态组件，而不是应该注册组件(您已经在注册了(，对于动态组件，您只需要发送已注册组件的名称。

组件注册在这里进行：

Vue.component('Condition', require('@/components/Condition.vue').default);

为了以动态方式使用该组件，您只需要执行以下操作：

<component :is="'Condition'"/>

正如您所看到的，只需要名称(作为字符串(，Vue就构成了组件的实例。

这是你的代码工作：

<template>
<div id="app">
<v-btn @click="addCondition()" color="secondary" dark>Add Condition</v-btn>
<div id="conditions">
<template v-for="condition in conditions">
<component :is="condition" :key="condition.id"></component>
</template>
</div>
</div>
</template>
<script>
// This component registration only needs to happens once, it could also be in another file
Vue.component("Condition", require("@/components/Condition.vue").default);
import Vue from "vue";
export default {
name: "Test",
components: {}, // No need for the component here since you are not using it
methods: {
addCondition() {
// NO need for instances here, nor for Vue.extend because Condition is already a component
this.conditions.push("Condition");
},
},
data() {
return {
conditions: [],
};
},
};
</script>