vue——组件自定义事件

一.什么是组件自定事件？

自定义事件：顾名思义就是自己定义的事件，包含事件名，事件回调等，定义好之后去给组件使用。也是一种组件的通信方式，适用于子组件==>父组件。

二.子组件怎么给父组件传值的？

（1）通过props传值

（i）找到父组件，先定义一个接受子组件数据的函数，并存入我们的变量中

注意：我们这传入的是一个函数，所以要用冒号去识别函数

 <Student  : 子组件发送数据时调用的方法名=" 父组件接收数据的方法名 "></Student>

（ii）父组件回应完子组件后，就需要子组件来传递数据

找到子组件之后，首先需要用props接收父组件递给的函数。然后给按钮添加点击事件，来触发父组件的函数，并传入你要传递的数据参数。

（iii）这样就成功了，父组件会接收到子组件的学校姓名：四川交通

总结：props父组件给子组件传递的过程就是：

　子组件通过调用父组件传递进来接收数据的方法，来实现数据传递

（2）组件自定义事件实现父子传值

组件自定义事件需要用v-on，v-on也可以写@，v-on在谁身上，就在谁的组件实例上绑定事件

（i）在父组件中给子组件绑定一个自定义事件

 （ii）需找到子组Student触发，通过$emit触发，传入参数，父组件接受参数

以上传入了多个参数：可以使用扩展运算符prarams，就可以接受所有参数，（上面随便传入了几个数字），在父组件中利用es6的三个点...prarams就可以接收到传入的几个数字

（3）第三种方法实现子传父

通过ref，ref相当于一个组件的标识，可以直接拿到该组件的实例对象

加上ref属性，我们就可以通过this.$refs.student去找这个组件

通过$on去绑定自定义事件，需要传入自定义事件名，以及调用的函数（相比较下要麻烦一点，但灵活性强，比如可以添加定时器等）

上面代码注释掉的$once：触发一次函数，也可以在自定义上添加once修饰符

　　比如：<Student @atguigu.once="getStudnetlName" />

(4)自定义事件解绑和销毁

以上代码中有解绑的几种写法

三.总结

1.一种组件间通信的方式，适用于：子组件 ===> 父组件

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

3.绑定自定义事件：

　　第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

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

　　<Demo ref="demo"/>......mounted({this.$refs.xxx.$on('atguigu',this.test)}

　　若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

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

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

6.组件上也可以绑定原生DOM事件，需要使用native修饰符。

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