在 Vue.js 中，$emit 事件可以让子组件向父组件发送消息。但是，有时候你会发现 $emit 事件会触发多次，这可能导致不必要的性能问题，甚至会影响应用程序的正确运行。这篇文章将介绍一些解决 $emit 事件触发多次的常用方法。
方法一：事件节流
事件节流是一种常用的解决方案，它可以有效地限制事件的触发次数。基本思路是设置一个计时器，当触发事件时，先判断计时器是否处于运行状态，若否则立即执行回调函数并开启计时器。若已经运行，则不执行回调函数，直到计时器结束并重置。这就能确保事件不会触发过于频繁。
以下是一个简单的实现，假设我们要限制事件 R 500ms 内只触发一次：
// www.javascriptcn.com code example
// 节流函数
function throttle(func, delay) {
let timer = null
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args)
timer = null
}, delay)
}
}
}
// 触发事件的回调函数
function handleEvent() {
// 处理逻辑
}
// 在 Vue 组件中使用
export default {
methods: {
handleClick: throttle(handleEvent, 500),
},
}这样，当用户频繁点击某个按钮时，事件就会被节流，只有当两次点击之间间隔超过 500ms 才会触发回调函数。
方法二：使用 once 修饰符
Vue.js 提供了一个 once 修饰符，它可以让事件只触发一次。使用方法很简单，只需要将 $emit 事件和 once 修饰符一起使用即可：
this.$emit('eventName', payload, true)注意，这里的 true 参数表示启用 once 修饰符。
以下是一个使用 once 修饰符的示例：
// www.javascriptcn.com code example
<!-- 子组件 -->
<template>
<button @click="handleClick">点击</button>
</template>
<script>
export default {
methods: {
handleClick() {
const payload = { data: 'some data' }
this.$emit('eventName', payload, true)
},
},
}
</script>// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
<ChildComponent @eventName="handleEvent" />
</template>
<script>
export default {
methods: {
handleEvent(payload) {
// 处理逻辑
},
},
}
</script>这样，当子组件中的按钮点击事件触发时，事件就会被限制为只触发一次。
方法三：使用 debounce 函数
与节流函数类似，防抖函数可以用来限制事件的触发次数。不同的是，防抖函数会等待一定的时间间隔，如果在此期间事件再次触发，则重新计时。这可以避免事件错失。
以下是一个简单的实现，假设我们要限制事件 D 在 500ms 后触发：
// www.javascriptcn.com code example
// 防抖函数
function debounce(func, delay) {
let timer = null
return function(...args) {
clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
// 触发事件的回调函数
function handleEvent() {
// 处理逻辑
}
// 在 Vue 组件中使用
export default {
methods: {
handleClick: debounce(handleEvent, 500),
},
}这样，当事件 D 触发时，如果在 500ms 内再次触发，则计时器会被重置并重新开始计时。
使用上述三种方法中的任意一种，都可以有效地解决 $emit 事件触发多次的问题，并提高应用程序的性能和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c03c14314edc268467d702