Vue系列教程（15）- 事件内容分发（$emit）-CFANZ编程社区

Vue系列教程（15）- 事件内容分发（$emit）

文章目录

1. 引言
2. 设计思路
3. 案例

1. 引言

通过前面的章节，我们已经学会了使用插槽slot来做模块化开发，有兴趣的同学可以参阅下：

本文主要讲解Vue的事件内容分发，在讲解前，我们说说设计的思路。

2. 设计思路

先来看看事件内容分发的流程图：

Vue系列教程（15）- 事件内容分发（$emit）_设计思路

看不懂没关系，下面来看实际的代码。

3. 案例

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入js文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>

<body>
    <!--view层，模板-->
    <div id="app">
        <article>
            <aritcle-title slot="todo-title" v-bind:title="title"></aritcle-title>
            <aritcle-content slot="aritcle-content" v-for="(item,index) in contents" :item="item" :index="index"
                v-on:remove="removeItems(index)">
            </aritcle-content>
        </article>

    </div>


    <script type="text/javascript">
        Vue.component('aritcle', {
            template: '<div>\
                <slot name="aritcle-title"></slot>\
                <ul>\
                    <slot name="aritcle-content"></slot>\
                </ul>\
            </div>'
        });
        Vue.component('aritcle-title', {
            props: ['title'],
            template: '<div>{{title}}</div>'
        });
        //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
        Vue.component("aritcle-content", {
            props: ["item", "index"],
            template: "<li>{{index+1}}、{{item}} <button @click='remove()'>删除</button></li> ",
            methods: {
                remove: function (index) {
                    this.$emit('remove', index);
                }
            }
        });

        var vm = new Vue({
            el: "#app",
            data: {
                title: "阿甘兄的博客",
                contents: ['Java', 'Python', 'Vue']
            },
            methods: {
                removeItems: function (index) {
                    console.log("删除了" + this.contents[index] + "OK");
                    this.contents.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>