组件的自定义事件②

组件的自定义事件②

文章目录

​​事件的解绑​​​​两个注意点​​

​​$on()方法中this的指向问题​​​​绑定误解​​

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

事件的解绑

我们在上一篇的基础上对事件进行解绑。

解绑使用的语法：$off(事件名)

注意：在哪里绑定的，就在哪里解绑

代码实现如下：

但是如上的方法只能解绑一个自定义事件，如果我们有多个自定义事件需要解绑，则在上面的方法中传入一个数组即可：

​​$off(['事件1'，‘事件2’，......])​​

两个注意点

$on()方法中this的指向问题

App组件

在$on()方法中第二个参数我们既然传入的是一个函数，那么我们能不能直接将函数定义在on方法中，而不是在methods中定义呢？

App组件：

我们发现this的指向并不是App

注意：谁触发了这个事件，此时$on()方法中this指向就是谁

这种情况造成的影响就是如果我们想要把从子组件传递过来的数据挂载到当前父组件的身上的时候，会发现挂载不上，因为此时this的指向已经不是这个父组件了

那么我们怎么解决这个问题呢？两种方法：

像以前一样，中规中矩的把回调方法写在methods中将$on()方法中传入的回调方法写成箭头函数。因为箭头函数没有自己的this，于是就向外寻找，而mounted()函数中的this已经被维护成了当前组件，也就是App，所以是可行的。

代码如下：

此时的this就是App组件了：

绑定误解

我们在给组件绑定一些原生的DOM事件的时候，会发现不能被触发，这是因为Vue会把一切在组件上绑定的事件当作自定义事件。

那么我们怎么解决这个问题呢？使用​​.native​​事件修饰符即可：

如此这个事件才会被当作原生的DOM事件去解析。

他的底层是把click事件交给了Student组件的最外层元素。

Student组件：

也就是这个大的div。

此处也从侧面印证了一个事实：组件的template里面只能有一个根元素! 如果有多个的话，此时你的click事件应该给谁呢？(当然这只是其中一个印证方向)

组件的自定义事件总结

组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件：

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

......mounted(){ this.$refs.xxx.$on('eventName',this.test)}

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

触发自定义事件：​​this.$emit('eventName',数据)​​解绑自定义事件​​this.$off('eventName')​​组件上也可以绑定原生DOM事件，需要使用​​native​​修饰符。注意：通过​​this.$refs.xxx.$on('eventName',回调)​​绑定自定义事件时，回调要么配置在methods中要么用箭头函数，否则this指向会出问题！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。