Javascript Vue.js动态添加和删除

我正在为我的游戏学习Vue.js，我想知道是否有办法在Vue.js中动态添加和删除组件？ 这是我目前的密码

var vue = new Vue({
    el: "#fui",
    template: ``
})

const HelloCtor = Vue.extend({
  props: ['text'],
  template: '<div class="hello">{{ text }}</div>',
});

const vm = new HelloCtor({
  data: {
    text: 'HI :)'
  }
});

/*
How can I do something like this?

vue.add(vm);
vue.remove(vm);

*/

var-vue=新的vue({
el:#fui#，
模板：``
})
常量HelloCtor=Vue.extend({
道具：['text']，
模板：“{text}}”，
});
const vm=新HelloCtor({
数据：{
文字：“嗨：）”
}
});
/*
我怎么能做这样的事？
vue.add（vm）；
vue.remove（vm）；
*/

代码基本上代表了他自己

---

那么，是否有可能（以及如何）向Vue动态添加和删除Vue.js组件

您需要在模板中放置

vm

。然后，您可以使用

vm.$mount（'el'）

将组件手动装载到元素中。您还可以使用

vm.$destroy（true）

删除元素。销毁不会从DOM中删除元素。您需要使用类似于

（vm.$el）.remove（）的工具手动执行此操作。

我不是100%这就是您要寻找的，当您发现自己手动调用

$destroy（）

时，您可能做得不对……但它确实可以让您控制组件的创建和销毁

类似这样的东西将允许您创建然后销毁组件（注意，在本例中，一旦您销毁vm，它就消失了）：

制作
摧毁
常量HelloCtor=Vue.extend({
道具：['text']，
模板：“这是{{text}}”，
})
const vm=新HelloCtor({
数据：{
文字：“已安装”
}
})
var vue=新的vue({
el:#fui#，
模板：``，
方法：{
make:（）=>{
vm.$mount（“#mountme”）
},
再见：（）=>{
vm.$destroy（真）；
（vm.$el）.remove（）；}
}
})

您的代码所说的内容无法实现。但如果你能进一步解释你的业务需求，我相信有一条出路。@charith我有一个游戏，你有多个项目，如警报框、库存、设置等。。。它们是可拖动的，可以关闭。我需要能够动态地删除它们并添加它们您确定您不只是想要吗？@BertEvans嗯，例如，对于警报，我希望在组件运行时从内存/DOM中完全删除该组件closed@JeePingVue是一个数据驱动的框架，其中显示的是状态的反映。你的方法是必要的。如果你想用你自己的方式去做，你将与框架抗争。听起来不错。。。除非您在单击Make&Destroy然后Make后出现错误，否则这就是我写的原因（在本例中，请注意，一旦您销毁了vm，它就消失了）。如果要再次添加，则需要编写代码再次创建新组件。我把它漏掉了，所以我会看到destroy实际上破坏了你的组件。

<div id="fui">
    <button @click="make">Make</button>
    <button  @click="bye">destroy</button>
    <div id="mountme"></div>
</div>

<script>

    const HelloCtor = Vue.extend({
        props: ['text'],
        template: '<div class="hello">This has been {{ text }}</div>',

    })

    const vm = new HelloCtor ({
        data: {
            text: "Mounted"
        }
    })

    var vue = new Vue({
        el: "#fui",
        template: ``,
        methods: {
            make: () => {
                vm.$mount('#mountme')
            },
            bye: () => {
                vm.$destroy(true); 
                (vm.$el).remove();}
            }

        })


</script>