当前位置：首页 > article >正文

Vue3自定义事件

article 2024/12/22 14:09:19

   自定义事件是一种组件间通信的方式，它允许子组件向父组件发送信息。

子组件可以通过自定义事件向父组件传递数据以及事件，当自定义事件触发时，子组件可以借此将子组件的数据传递给父组件并使父组件对此做出相应的操作。

1.声明自定义事件

使用defineEmits()宏声明组件要发生的事件（事件名自己取），defineEmits() 的返回值是一个 ref。
下面的代码为组件声明了事件 myEvent 。

const emit = defineEmits(['myEvent'])

2.触发与监听事件

2.1 事件触发

自定义事件可以在 template 部分中使用 $emit和在 setup 部分中使用 defineEmits() 的返回值触发。
下面例子使用按钮点击事件触发自定义事件。
template中触发：

<template>
  <button @click="$emit('myEvent')">点我</button>
</template>

setup中触发：

<template>
  <button @click="handleClick">点我</button>
</template>

<script setup>

const emit = defineEmits(['myEvent'])

const handleClick = () => {
  emit('myEvent')
}

</script>

2.2 事件监听

父组件在使用子组件时，在子组件上监听自定义事件并采取相关操作。

<template>
  <Child
  @my-event="handleMyEvent"
  >
  </Child>
</template>

<script setup>
import Child from '@/components/TestChild/index.vue'

const handleMyEvent = () => {
  console.log('555')
}

</script>

<style lang='scss' scoped>

</style>

3.事件参数

有时候，我们需要在事件触发时传递特定的值。这时可以给 $emit 提供而外的参数。
下面代码中，当事件触发时，子组件向父组件传递一个参数：

<template>
  <button @click="$emit('myEvent',10)">点我</button>
</template>

<script setup>

const emit = defineEmits(['myEvent'])

</script>

<style lang='scss' scoped>

</style>

父组件可以使用一个内联的箭头函数或组件函数方法监听事件，两种方式都可以接收到参数。
箭头函数：

<template>
  <p>{{ num }}</p>
  <Child
  @my-event="(n) => num += n"
  >
  </Child>
</template>

<script setup>
import { ref } from 'vue';
import Child from '@/components/TestChild/index.vue'

const num = ref(0)

</script>

<style lang='scss' scoped>

</style>

组件函数：

<template>
  <p>{{ num }}</p>
  <Child
  @my-event="handleMyEvent"
  >
  </Child>
</template>

<script setup>
import { ref } from 'vue';
import Child from '@/components/TestChild/index.vue'

const num = ref(0)

const handleMyEvent = (n) => {
  num.value += n
}

</script>

<style lang='scss' scoped>

</style>