vue组件通信---子传父（自定义事件$emit(eventName,data)）

一、概括

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

绑定事件监听

// 方式一: 通过 v-on 绑定
@delete_todo="deleteTodo"

// 方式二: 通过$on()
this.$refs.xxx.$on('delete_todo',function(todo){
    this.deleteTodo(todo) 
})

触发事件

// 触发事件(只能在父组件中接收)
this.$emit(eventName,data)

 注意:
1) 此方式只用于子组件向父组件发送消息(数据)

2) 问题: 隔代组件或兄弟组件间通信此种方式不合适

 

二、案例

案例：
第一步：在子组件中创建一个按钮，给按钮绑定一个点击事件

第二步：在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数(自定义事件名)

第三步：在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

第四步：使用传递过来的数据(父组件中响应的事件参数)

child.vue

parent.vue