vue自定义事件

书接上文，我们仔细想一想，如果我们想要在模板标签中，操作vue对象中的数据，根据前面学习的知识我们可以知道，

如果模板标签想要读取vue对象中的数据，需要对想要的数据进行绑定，并且通过props接收，

如此以来，我们实际上是将vue中的数据传到了模板里，也就是说，在模板中的数据类似于局部变量，

对局部变量进行操作是不对全局变量造成改变的。

那么，我们应该如何进行操作呢，我们的自定义事件就派上用场了

上代码

<div id="app">
    <tudo>
        <todo-tille :tille="todotille" slot="todo-tille"></todo-tille>
        <todo-items v-for="(item,index) in todoitems" :item="item" :index="index"
                    v-on:remove="Vueremove(index)" slot="todo-items" :key="index"></todo-items>
    </tudo>
</div>


<!--    到入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
    Vue.component("todo", {
        template: '' +
            '<div>' +
            '<slot name="todo-tille"></slot>' +
            '<ul>' +
            '<slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'
    })
    Vue.component("todo-tille", {
        props: ['tille'],
        template: '<div>{{tille}}</div>'
    })
    Vue.component("todo-items", {
        props: ['item', 'index'],
        template: '<li>{{item}}&nbsp;<button @click="remove()">删除</button></li>',
        methods: {
            remove: function (index) {
                this.$emit('remove', index)
            }
        }
    })
    var vm = new Vue({
        el: "#app", //绑定id
        data: {
            todotille: '汇编语言',
            todoitems: ['Java', 'Python', 'C', 'C++']
        },
        methods: {
            Vueremove: function (index) {
                alert("删除了" + this.todoitems[index] + "ok")
                this.todoitems.splice(index, 1, null)
            }
        }
    });

</script>

从代码中我们可以看到，我们在模板标签中，调用了我们在vue中的方法，之后，在我们的模板中，又创建了一个函数remove，然后通过@emit将调用的方法绑定，如此以来

就能直接调用vue对象中的方法对vue对象属性进行操作了