11_10_第六阶段：大前端进阶||07-Vue详解||P12：自定义事件内容分发（this.$emit()）【Vue核心部分||Vue入门小结】【观看狂神随笔】

本文链接：https://blog.csdn.net/qq_40572023/article/details/120562269

Vue：计算属性，内容分发，【自定义事件】

1.自定义事件

在这里插入图片描述

注：涉及到的JavaScript语法

在这里插入图片描述

2.代码流程

在vue的实例中,增加了 methods 对象并定义了一个名为removeItems的方法

var vm = new Vue({
        el: "#app",
        data: {
            title: "黑神",
            todoItems: ['黑神说Java','黑神说Vue']
        },
        methods: {
        	// 该方法可以被模板中自定义事件触发
            removeItems: function (index){
                console.log("删除了" + this.todoItems[index] + "ok");
                // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中 index 为添加/删除项目的位置，1 表示删除的数量
                this.todoItems.splice(index, 1);    //一次删除一个元素
            }
        }
    });

修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件!

//这里是数据：列表
    Vue.component("todo-items",{
        props: ['item', 'index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}----{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                //自定义事件分发
                // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
                this.$emit('remove', index);
            }
        }
    });

修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!

<div id="app">
	<!--增加了 v-on:remove="removeItems(index)" 自定义事件，该事件会调用 Vue 实例中定义的名为 removeItems的方法-->
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--v-on用来绑定事件-->
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>

</div>

3.思路图

关注度分离原则（SoC）

4.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--v-on用来绑定事件-->
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    //slot：插槽->就是为了动态插入数据
    Vue.component("todo",{  //这里''+可以换成\，但不建议
        template:
        '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
                '<slot name="todo-items"></slot>' +
            '</ul>' +
        '<div/>'
    });
    //这里是数据：标题
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    //这里是数据：列表
    Vue.component("todo-items",{
        props: ['item', 'index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}----{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                //自定义事件分发
                this.$emit('remove', index);
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "黑神",
            todoItems: ['黑神说Java','黑神说Vue']
        },
        methods: {
            removeItems: function (index){
                console.log("删除了" + this.todoItems[index] + "ok");
                this.todoItems.splice(index, 1);    //一次删除一个元素
            }
        }
    });
</script>

</body>
</html>