小编Gra*_*ess的帖子

Vue 3 没有 Vue.extend() 方法，所以这里的例子不起作用：https ://css-tricks.com/creating-vue-js-component-instances-programmatically/

我试过这个解决方案：https : //jsfiddle.net/jamesbrndwgn/fsoe7cuy/

但它会在控制台中引起警告：

Vue 收到了一个组件，它是一个响应式对象。这会导致不必要的性能开销，应该通过用markRaw或shallowRef代替标记组件来避免ref。

在此处输入图片说明

那么，在 Vue 3 中动态（以编程方式）添加组件的正确方法是什么？

上传任务标签管理器.vue

<template>
    <button @click="addTag()" type="button">Add new tag</button>
    <br>
    <div>
        <div v-for="child in children" :key="child.name">
            <component :is="child"></component>
        </div>
    </div>
</template>

<script>
    import UploadTaskTag from "./UploadTaskTag";

    export default {
        name: "UploadTaskTagManager",
        components: {UploadTaskTag},

        data() {
            return {
                children: []
            }
        },

        methods: {
            addTag() {
                this.children.push(UploadTaskTag);
            },
        }
    }
</script>

上传任务标签.vue

<template>
    <div>
        <select @change="onChangeTag($event)" v-model="currentTag">
            <option …