Vue系列教程（15）- 事件内容分发（$emit）-阿里云开发者社区

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

2023-11-16 33

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

1. 引言

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

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

2. 设计思路

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

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

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>