10-内置事件和组件自定义事件

1. 介绍

@click, keyup, keydown, update 等这些都是 js 内置的事件，可以直接用。
自定义事件是给组件用的。

2. 子向父组件传值的方法

3. 代码

父级组件 app

子组件 School.vue

子组件 Student.vue

4.解绑自定义组件事件

在哪个组件上绑定的事件，就在哪个组件上解绑。解绑的方式有四种

methods:{
unbind(){
this.$off("事件名") //解绑一个事件
this.$off() // 解绑所有事件
this.$off(["事件名1","事件名2"]) //解绑两个事件或更多
//还有一种方法是把整个组件的实例对象销毁，组件（vc）销毁以后在组件上的自定义事件也被销毁了
}
}

5. 总结

1. 自定义组件事件是一种组件间通信的方式，适用于：子给父组件传递信息。

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3. 绑定自定义事件
   第一种方式：
   在父组件中： 或者

第二种方式：
在父组件中：

....
mounted(){ this.$refs.xxx.$on("atguigu", this.test) }

备注：如果想让自定义事件只触发一次，可以使用 once修饰符或者$once方法

4. 触发自定义事件：this.$emit("atguigu",数据)

5. 解绑自定义事件：this.$off('atguigu')

6. 组件上也可以绑定原生dom事件，如果click事件，但是为了让其生效需要使用修饰符native, 比如

7. 注意：通过this.$refs.xxx.$on('atguigu', 回调函数) 绑定自定义事件的，回调要么配置在methods里，要么使用箭头函数，否则this指向会有问题。