Vue3 emit 不触发|极客教程

Vue3 emit 不触发

在Vue3中，emit是用来在子组件向父组件传递消息的方法。当在子组件中调用emit方法时，会触发父组件中相应的事件。但是有时会出现emit不触发的情况，这可能是因为以下几个原因导致的。

未正确绑定事件

在父组件中使用子组件时，需要在子组件的模板中绑定相应的事件，才能在子组件中触发emit。如果忘记在父组件中绑定事件，就无法接收到emit传递的消息，导致emit不触发的问题。

<!-- 父组件 -->
<template>
  <ChildComponent @customEvent="handleCustomEvent"/>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent() {
      console.log('Custom event emitted')
    }
  }
}
</script>

在上面的示例中，父组件中正确绑定了@customEvent事件，才能接收到子组件中emit的消息。

事件名称不一致

另一个可能导致emit不触发的原因是事件名称不一致。父组件和子组件之间需要使用相同的事件名称来进行通信，否则emit不会起作用。

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('customEvent')
    }
  }
}
</script>

在子组件中，使用了this.$emit('customEvent')来触发customEvent事件，父组件中也需要使用相同的事件名称@customEvent来接收消息。

组件未正确引入

如果在父组件中未正确引入子组件，也会导致emit不触发的问题。Vue3的组件系统是基于ES模块的，因此需要使用正确的import语法引入组件。

<!-- 父组件 -->
<template>
  <ChildComponent @customEvent="handleCustomEvent"/>
</template>

<script>
import ChildComponent from './ChildComponent.vue' // 正确引入方式

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent() {
      console.log('Custom event emitted')
    }
  }
}
</script>

确保使用正确的引入方式可以避免emit不触发的问题。

总而言之，要确保emit不触发的问题，需要注意绑定事件、事件名称一致以及正确引入组件这些方面。通过正确的使用emit方法，可以实现子组件向父组件传递消息，实现组件间的通信。