Vue-组件自定义事件(绑定和解绑)

分手后的思念是犯贱 2023-10-12 19:36 69阅读 0赞

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

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

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

下面通过案例说明

## 1 编写案例 ##

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

![fbad7bafdc740fdc049a69ac5a4c6087.png][]

## 2 props实现 ##

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

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

![516e1ba8a5c55aaa24bbbbc02e4b6b7c.png][]

![34e7c07ddbbee2609f8ca5760b3ac160.png][]

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

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

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

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

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

![6dd7e8f537a6a2a6fb37032c4d89f933.png][]

也是可以完成的

![179c11a2055aea9a1bdd571fe3735704.png][]

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

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

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

![fdb7e940e848613549732073aa4ab0b5.png][]

效果都是一样的

![8b5e45d8e479bc4a065eaca9bad3dc33.png][]

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

![a9a0e03b1689c2a515f1f412676e3701.png][]

## 5 只能触发一次事件 ##

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

![424b70aced9ec04ad662f3e304a92c7e.png][]

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

![cd3d471cde37419541dcdf02020d82f0.png][]

## 6 多个参数传递 ##

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

![fecd2cd2b2a1a99a69f6434aa0205a48.png][]

![24a070474b290ce70f6bf3c60131cf72.png][]

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

![96d5aa87a143e147349e51fbc3945608.png][]

![41ebd2e93928fe7db0d0a96d7858d0b7.png][]

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

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

## 1 解绑一个事件 ##

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

![7e664a37a367eea494ec0aa0d6d45640.png][]

那么多个该如何操作呢？

## 2 解绑多个事件 ##

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

![5d9692acc84fddda7ba56c9913c3989c.png][]

![653477c8c5fc023613ebf28323950de8.png][]

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

![f23d7a38ceab96be074ba79dfc188010.png][]

## 3 解绑全部事件 ##

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

![9e426c7813018322efdd8e15ff8e8502.png][]

# 组件的自定义事件总结 #

1.  一种组件间通信的方式，适用于：**子组件 ===> 父组件**
2.  使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3.  绑定自定义事件：
4.  第一种方式，在父组件中：`<Demo @atguigu="test"/>`或 `<Demo v-on:atguigu="test"/>`
5.  第二种方式，在父组件中：

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

1.  若想让自定义事件只能触发一次，可以使用`once`修饰符，或`$once`方法。
2.  触发自定义事件：`this.$emit('atguigu',数据)`
3.  解绑自定义事件`this.$off('atguigu')`
4.  组件上也可以绑定原生DOM事件，需要使用`native`修饰符。
5.  注意：通过`this.$refs.xxx.$on('atguigu',回调)`绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

[fbad7bafdc740fdc049a69ac5a4c6087.png]: https://img-blog.csdnimg.cn/img_convert/fbad7bafdc740fdc049a69ac5a4c6087.png
[516e1ba8a5c55aaa24bbbbc02e4b6b7c.png]: https://img-blog.csdnimg.cn/img_convert/516e1ba8a5c55aaa24bbbbc02e4b6b7c.png
[34e7c07ddbbee2609f8ca5760b3ac160.png]: https://img-blog.csdnimg.cn/img_convert/34e7c07ddbbee2609f8ca5760b3ac160.png
[6dd7e8f537a6a2a6fb37032c4d89f933.png]: https://img-blog.csdnimg.cn/img_convert/6dd7e8f537a6a2a6fb37032c4d89f933.png
[179c11a2055aea9a1bdd571fe3735704.png]: https://img-blog.csdnimg.cn/img_convert/179c11a2055aea9a1bdd571fe3735704.png
[fdb7e940e848613549732073aa4ab0b5.png]: https://img-blog.csdnimg.cn/img_convert/fdb7e940e848613549732073aa4ab0b5.png
[8b5e45d8e479bc4a065eaca9bad3dc33.png]: https://img-blog.csdnimg.cn/img_convert/8b5e45d8e479bc4a065eaca9bad3dc33.png
[a9a0e03b1689c2a515f1f412676e3701.png]: https://img-blog.csdnimg.cn/img_convert/a9a0e03b1689c2a515f1f412676e3701.png
[424b70aced9ec04ad662f3e304a92c7e.png]: https://img-blog.csdnimg.cn/img_convert/424b70aced9ec04ad662f3e304a92c7e.png
[cd3d471cde37419541dcdf02020d82f0.png]: https://img-blog.csdnimg.cn/img_convert/cd3d471cde37419541dcdf02020d82f0.png
[fecd2cd2b2a1a99a69f6434aa0205a48.png]: https://img-blog.csdnimg.cn/img_convert/fecd2cd2b2a1a99a69f6434aa0205a48.png
[24a070474b290ce70f6bf3c60131cf72.png]: https://img-blog.csdnimg.cn/img_convert/24a070474b290ce70f6bf3c60131cf72.png
[96d5aa87a143e147349e51fbc3945608.png]: https://img-blog.csdnimg.cn/img_convert/96d5aa87a143e147349e51fbc3945608.png
[41ebd2e93928fe7db0d0a96d7858d0b7.png]: https://img-blog.csdnimg.cn/img_convert/41ebd2e93928fe7db0d0a96d7858d0b7.png
[7e664a37a367eea494ec0aa0d6d45640.png]: https://img-blog.csdnimg.cn/img_convert/7e664a37a367eea494ec0aa0d6d45640.png
[5d9692acc84fddda7ba56c9913c3989c.png]: https://img-blog.csdnimg.cn/img_convert/5d9692acc84fddda7ba56c9913c3989c.png
[653477c8c5fc023613ebf28323950de8.png]: https://img-blog.csdnimg.cn/img_convert/653477c8c5fc023613ebf28323950de8.png
[f23d7a38ceab96be074ba79dfc188010.png]: https://img-blog.csdnimg.cn/img_convert/f23d7a38ceab96be074ba79dfc188010.png
[9e426c7813018322efdd8e15ff8e8502.png]: https://img-blog.csdnimg.cn/img_convert/9e426c7813018322efdd8e15ff8e8502.png