组件自定义事件(绑定)

像 click,change 这些都是 js 的内置事件，我们可以直接使用，本次我们学习自己根据需求打造全新的事件，但是 js 内置的是给 html 元素用的,本次的自定义事件是给组件用的

注意：组件上也可以绑定原生 DOM 事件，需要使用 native 修饰符，销毁组件实例也会销毁组件对应的自定义事件

下面通过案例说明

1 编写案例

如图，我有三个组件，分别是学生，学校和 app，由 app 管理其他两个组件，这时候想给学校组件一个按钮，点击的时候会把学校名称交给 app

2 props 实现

通过父组件给子组件传递函数类型的 props 实现：子给父传递数据

我们可以子组件使用 props 给父组件传递，所以首先在 app 里面定义函数,然后通过 props 进行传递使用

3 自定义事件实现方式 1

如果我还想继续给 student 一个按钮，点击的时候把学生姓名给 app 组件呢？这次不用 props 了，使用自定义事件实现

通过父组件给子组件绑定自定义事件实现：子给父传递数据

使用 $emit 触发组件身上的自定义事件，参数是事件名称

当然，使用 @简写形式替代 v-on 也是可以的，我这里没有简写，事件名称和回调名称可以相同的

也是可以完成的

4 自定义事件实现方式 2

除了上述的方式，还有另外一种方式可以实现，使用 ref，写一个加载钩子函数，使用 $on

这种写法虽然麻烦，需要写钩子函数，但是它也更加的灵活

效果都是一样的

如果验证它更加的灵活呢?比如现在有这样的一个需求，需要 3 秒后才能加载事件，这时候使用第一种写法就写不了，但是第二种写法就可以

5 只能触发一次事件

有的场景，我想要自定义事件触发一次后就不再触发了，这时候就不能使用$on这个api了，应该使用$once

如果不是这种写法呢？也是一样的道理，在事件名称后.once 即可

6 多个参数传递

自定义事件也是可以支持传递多个参数的，使用逗号拼接即可

但是一般多个参数不会这么写，而是使用 es6 里面的...params 接收,他会把多个参数拼接成一个数组

组件自定义事件(解绑)

上面介绍了绑定自定义事件，接下来就是对应的解绑自定义事件

1 解绑一个事件

使用 $off 解绑，参数就是事件名称，这种写法只支持解绑一个事件

那么多个该如何操作呢？

2 解绑多个事件

比如现在有两个自定义事件

使用 $off 解绑，参数是一个数组，里面是参数名称

3 解绑全部事件

还有一种更加暴力的写法，使用 off 方法什么也不传，这便是解绑全部事件

组件的自定义事件总结

1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>

2. 使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（<span style="color:red">事件的回调在 A 中</span>）。

3. 绑定自定义事件：

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

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

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

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

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

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

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

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

   像 click,change 这些都是 js 的内置事件，我们可以直接使用，本次我们学习自己根据需求打造全新的事件，但是 js 内置的是给 html 元素用的,本次的自定义事件是给组件用的

   注意：组件上也可以绑定原生 DOM 事件，需要使用 native 修饰符，销毁组件实例也会销毁组件对应的自定义事件

   下面通过案例说明

   ## 1 编写案例

   如图，我有三个组件，分别是学生，学校和 app，由 app 管理其他两个组件，这时候想给学校组件一个按钮，点击的时候会把学校名称交给 app

   

   ## 2 props 实现

   通过父组件给子组件传递函数类型的 props 实现：子给父传递数据

   我们可以子组件使用 props 给父组件传递，所以首先在 app 里面定义函数,然后通过 props 进行传递使用

   

   

   ## 3 自定义事件实现方式 1

   如果我还想继续给 student 一个按钮，点击的时候把学生姓名给 app 组件呢？这次不用 props 了，使用自定义事件实现

   通过父组件给子组件绑定自定义事件实现：子给父传递数据

   使用 $emit 触发组件身上的自定义事件，参数是事件名称

   当然，使用 @简写形式替代 v-on 也是可以的，我这里没有简写，事件名称和回调名称可以相同的

   

   也是可以完成的

   

   ## 4 自定义事件实现方式 2

   除了上述的方式，还有另外一种方式可以实现，使用 ref，写一个加载钩子函数，使用 $on

   这种写法虽然麻烦，需要写钩子函数，但是它也更加的灵活

   

   效果都是一样的

   

   如果验证它更加的灵活呢?比如现在有这样的一个需求，需要 3 秒后才能加载事件，这时候使用第一种写法就写不了，但是第二种写法就可以

   

   ## 5 只能触发一次事件

   有的场景，我想要自定义事件触发一次后就不再触发了，这时候就不能使用 $on 这个 api 了，应该使用 $once

   

   如果不是这种写法呢？也是一样的道理，在事件名称后.once 即可

   

   ## 6 多个参数传递

   自定义事件也是可以支持传递多个参数的，使用逗号拼接即可

   

   

   但是一般多个参数不会这么写，而是使用 es6 里面的...params 接收,他会把多个参数拼接成一个数组

   

   

   # 组件自定义事件(解绑)

   上面介绍了绑定自定义事件，接下来就是对应的解绑自定义事件

   ## 1 解绑一个事件

   使用 $off 解绑，参数就是事件名称，这种写法只支持解绑一个事件

   

   那么多个该如何操作呢？

   ## 2 解绑多个事件

   比如现在有两个自定义事件

   

   

   使用 $off 解绑，参数是一个数组，里面是参数名称

   

   ## 3 解绑全部事件

   还有一种更加暴力的写法，使用 off 方法什么也不传，这便是解绑全部事件

   

   # 组件的自定义事件总结

   1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>

   2. 使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（<span style="color:red">事件的回调在 A 中</span>）。

   3. 绑定自定义事件：

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

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

   ```js

   <Demo ref="demo"/>

   ......

   mounted(){

   this.$refs.xxx.$on('atguigu',this.test)

   }

   ```

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

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

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

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

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