vue自定义事件，解绑自定义事件_财经热点

创始人

2025-06-01 00:37:05

js中的事件是给html用的，自定义事件是给组件使用的！

绑定一个自定义事件实现子给父传递数据！
在这里插入图片描述

在App里面，给他的实例对象绑定了一个事件，只要事件被触发，这个demo就会被调用，这个demo是写在App的methods里面的！！！！

1.那么如何触发呢？

给谁绑定的找谁触发

在这里插入图片描述
用$emit，注意，千万别写错了，写成了这里emit后面的参数必须对应上app里面的名字。

2.如果要加上参数怎么办？

在这里插入图片描述

在后面将数据传输过去就是了！这种方式和最原始的相比，我们不需要传入到props中

也可以这么写实现同样的效果：

在这里插入图片描述

我们写ref就能拿到这个组件的实例对象，写一个钩子mounted，当挂在完毕的时候。mounted写在哪个组件里面就是哪个挂载完毕，这里写在了App里面就是当App挂载完毕的时候，通过下面这方法拿到

在这里插入图片描述

这种方法更加灵活，可以干更多的事情，比如说：

在这里插入图片描述
等三秒再上

也可以设置，让自定义事件触发一次后就不再触发了

3.传递形参怎么办？

直接跟着后面写在这里插入图片描述

或者

在这里插入图片描述
第一个形参是name，其他放在a中，解构赋值！！！

解绑自定义事件

解绑一个自定义事件！
在这里插入图片描述

解绑多个自定义事件

在这里插入图片描述
上面的写法是解绑数组里面的事件，下面是解绑所有的自定义事件！！！！！

销毁后所有的自定义事件都不能用了，但是原生事件不受印象！

注意点

1.我们通过ref的方式来传递的时候，这个地方的this并不是app中的this，而是student中的this！！

在这里插入图片描述
这里的this不是app里面的this，而是student里面的this，所以不能给data里面的数据赋值

那么如何解决

1.1写成箭头函数！！！

在这里插入图片描述
2.2再写一个同名普通函数，写在这个methods里面

vue规定

在这里插入图片描述
红色框里面的this就是指向app

2.组件绑定原生事件

在这里插入图片描述
这么写会被当做是自定义组件，那么我们要这么写？？

在这里插入图片描述

加一个.native！！！

总结：

在这里插入图片描述