vue.js - Vue中的组件可以自我销毁嘛

问题描述

问 题

我写了个Vue组件，然后想在这个组件的模板内写一个删除的方法，让这个组件的实例删除自身，是否可行，用什么方法或者api?

部分html：

<ul>
   <menu-item v-for="item in data" v-bind:model="item"></menu-item>
 </ul>

组件模板部分代码：

<script type="text/x-template" id="item-template">
    <li v-if="!delState">
        //others
        <span v-on:click="delItem">【X】</span>
    </li>
</script>

组件部分代码：

Vue.component('menu-item', {
        template: '#item-template',
        props: {
            model: [Object, Array],
        },
        methods: {
            delItem: function () {
            //这里该如何实现，才能达到删除的目的？
             }
          }
      });

界面大体如下：

解决方案

不能自己删除自己。只有自己distroy时的生命周期函数。
可以这样：
创建一个menu-list的父组件。
menu-list中存储每一个menu-item的数据(Array)。然后需要删除某个menu-item， 删除那个数据就好， Vue会自动删除对应的实例。

这篇关于vue.js - Vue中的组件可以自我销毁嘛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！