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

1. 引言

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

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
• 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
• 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
• 《Vue系列教程（08）- 基本语法》
• 《Vue系列教程（09）- 事件绑定》
• 《Vue系列教程（10）- Model数据内容双向绑定》
• 《Vue系列教程（11）- 组件详解》
• 《Vue系列教程（12）- Axios异步通信》
• 《Vue系列教程（13）- 计算属性（computed）》
• 《Vue系列教程（14）- 插槽（slot）》

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

2. 设计思路

先来看看事件内容分发的流程图： 看不懂没关系，下面来看实际的代码。

3. 案例

示例代码如下：

DOCTYPE html>



    
    Title
    
    



    
    
        
            
            
            
        

    


    
        Vue.component('aritcle', {
            template: '
\
                \
                
\
                    \
                
\
            
'
        });
        Vue.component('aritcle-title', {
            props: ['title'],
            template: '
{{title}}
'
        });
        //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
        Vue.component("aritcle-content", {
            props: ["item", "index"],
            template: "
{{index+1}}、{{item}} 删除
 ",
            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);
                }
            }
        });
    

运行结果如下：

运行结果删除第1个删除第2个删除第3个

现在具体的实现，可以结合设计思路图来理解了。本文完！