vue3中使用$emit

在 Vue3 中，使用 $emit 方法需要通过 setup 函数中的 emit 函数来获取。具体步骤如下：

1. 在组件中定义一个事件处理函数。

<template>
  <button @click="onClick">点击触发事件</button>
</template>

<script>
export default {
  setup(props, {emit}) {
    const onClick = () => {
      emit('my-event', '参数1', '参数2');
    }
    return {
      onClick
    }
  }
}
</script>

2. 在父组件中监听该事件。

<template>
  <child-component @my-event="handleEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent(param1, param2) {
      console.log(param1, param2);
    }
  }
}
</script>

在这个例子中，子组件中的 onClick 函数通过 emit 函数触发了 my-event 事件，并传递了两个参数。父组件中通过 @my-event 监听了该事件，并在 handleEvent 方法中获取了传递的参数，并打印到控制台上。

相关问题

vue3 怎么使用$emit

在 Vue 3 中，使用 `$emit` 发送自定义事件的方式与 Vue 2.x 是相似的。以下是使用 `$emit` 的步骤：

1. 在父组件中，使用 `v-on` 或简写的 `@` 监听子组件发出的事件。
2. 在子组件中，使用 `$emit` 方法触发自定义事件。

下面是一个使用 `$emit` 的示例：

<!-- 父组件 -->
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
    <child-component @message-sent="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendMessage() {
      // 触发自定义事件，并传递参数
      this.$emit('message-sent', 'Hello, child component!');
    },
    handleMessage(message) {
      console.log('收到子组件的消息:', message);
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendReply">回复消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendReply() {
      // 触发自定义事件，并传递参数
      this.$emit('message-sent', 'Hello, parent component!');
    }
  }
}
</script>

在上述示例中，当点击父组件中的按钮时，会触发 `sendMessage` 方法，并通过 `$emit` 发送一个自定义事件 `'message-sent'` 到父组件。父组件监听该事件，并调用 `handleMessage` 方法处理接收到的消息。

在子组件中，当点击子组件中的按钮时，会触发 `sendReply` 方法，并通过 `$emit` 发送一个自定义事件 `'message-sent'` 到父组件。

请注意，父组件只能监听子组件发出的事件，无法直接调用子组件的方法。如果需要在父组件中调用子组件的方法，可以使用 `ref` 引用子组件，然后通过引用来调用方法。

Vue3 怎么使用$emit

在Vue 3中，我们可以使用选项API或组合API来使用$emit。具体方法如下：

1.选项API：

在组件中使用$emit，只需要在方法中调用即可。例如：

this.$emit('eventName', data)

其中，eventName为自定义事件名，data为要传递的数据。

2.组合API：

在组合式API中，我们需要使用context.emit来触发事件。例如：

import { defineEmits } from 'vue'

const emits = defineEmits(['eventName'])

// 在需要触发事件的地方
emits('eventName', data)

其中，defineEmits用于定义要触发的事件名，data为要传递的数据。

另外，在使用组合API时，如果在<script setup>中定义了一个函数，可以直接在模板中使用@eventName="函数名"来触发事件。

例如：

import { ref } from 'vue'

const count = ref(0)

const add = (i) => count.value += i

// 在模板中
<ChildComponent @add="add" />
<p>Count: {{ count }}</p>