Vue笔记(五):自定义事件(Vue notes (V): custom events)

时间:2022/01/15

时间:2022/01/15

首先给出示例代码,通过示例代码来说明为什么需要自定义事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-list slot="todo-list" v-for="(item, index) in items" v-bind:list="item" 
               v-on:remove="removeByIndex(index)"></todo-list>
        </todo>

    </div>
    
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

    <script>

        Vue.component("todo",{
            template:'<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-list"></slot>\
                        </ul>\
                    </div>'
        });

        Vue.component("todo-title",{
            props: ["title"],
            template:'<div>{{title}}</div>'
        });

        Vue.component("todo-list",{
            props: ["list"],
            template: '<li>{{list}}<button v-on:click="remove">删除</button></li>',
            methods: {
                remove: function(){
                    this.$emit("remove");
                }
            }
        });

        var vm = new Vue({
            el: "#app",
            data: {
                title: "图书列表",
                items: ["Java", "Python", "Linux"]
            },
            methods: {
                removeByIndex: function(index){
                    // 一次删除一个元素
                    this.items.splice(index, 1);
                }
            }
        });

    </script>


</body>
</html>

上面这段代码是在Vue笔记(四):插槽的基础上为每一个slot中的button按钮添加一个点击删除的函数。但是问题在于由于vm对象中的方法只能与前端进行交互,而相同的,组件component中的代码也只能与前端的代码进行交互,这就导致component中的代码无法直接调用vm对象中的删除函数,所以需要通过前端来实现一个中转,而自定义事件就能起到这样一个中转的作用。具体需要看<todo-list>标签中的代码,可以看到通过v-on将自定义的事件remove与vm对象中的removeByIndex方法绑定在了一起,这样在component的remove方法中就可以通过this.$emit获取到自定义的remove事件,也就可以通过这个事件调用到vm中的removeByIndex方法了。

————————

Time: January 15, 2022

Time: January 15, 2022

First, the sample code is given to illustrate why custom events are needed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-list slot="todo-list" v-for="(item, index) in items" v-bind:list="item" 
               v-on:remove="removeByIndex(index)"></todo-list>
        </todo>

    </div>
    
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

    <script>

        Vue.component("todo",{
            template:'<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-list"></slot>\
                        </ul>\
                    </div>'
        });

        Vue.component("todo-title",{
            props: ["title"],
            template:'<div>{{title}}</div>'
        });

        Vue.component("todo-list",{
            props: ["list"],
            template: '<li>{{list}}<button v-on:click="remove">删除</button></li>',
            methods: {
                remove: function(){
                    this.$emit("remove");
                }
            }
        });

        var vm = new Vue({
            el: "#app",
            data: {
                title: "图书列表",
                items: ["Java", "Python", "Linux"]
            },
            methods: {
                removeByIndex: function(index){
                    // 一次删除一个元素
                    this.items.splice(index, 1);
                }
            }
        });

    </script>


</body>
</html>

The above code is based on Vue note (4): slot to add a function to click delete for the button button in each slot. However, the problem is that because the methods in the VM object can only interact with the front end, and similarly, the code in the component can only interact with the code in the front end, the code in the component cannot directly call the delete function in the VM object. Therefore, a transit needs to be realized through the front end, and the custom event can play such a transit role. See & lt; todo-list> From the code in the tag, you can see that the custom event remove is bound with the removebyindex method in the VM object through v-on, so you can use this in the remove method of the component$ Emit gets the custom remove event, and you can call the removebyindex method in the VM through this event.