Vue 3 中向 $emit 传递参数：有什么新花样？

2024-03-03 14:17:59

在 Vue 3 中向 $emit 添加参数：深入解析

简介

在 Vue 3 中，$emit 方法用于在组件之间传递事件。与 Vue 2 不同，Vue 3 中向 $emit 添加参数的方式略有不同。本文将深入解析如何在 Vue 3 中向 $emit 添加参数，包括详细的步骤、注意事项和代码示例。

子组件中向 $emit 添加参数

在子组件中，使用 $emit 方法并传递参数：

this.$emit('getValue', 'someParameter', value);

其中：

'getValue' 是事件名称。
'someParameter' 是第一个参数（字符串）。
value 是第二个参数（可以是任何类型）。

父组件中监听事件并获取参数

在父组件中，使用 v-on 指令监听子组件发出的事件，并使用 $event 对象获取参数：

<Child @getValue="parseValue($event)" />

@getValue 指令监听子组件的 getValue 事件。
parseValue 方法将接收 $event 对象作为参数。

在方法中解析参数

在父组件的方法中，$event 对象包含传递的参数。你可以从中提取参数：

parseValue(event) {
  const param = event[0]; // 'someParameter'
  const value = event[1]; // 'value'
}

注意：

在 Vue 3 中，$emit 方法中的参数是一个数组。第一个参数是事件名称，后面的参数是传递的数据。
对于多个参数，可以使用逗号分隔：this.$emit('getValue', 'param1', value1, 'param2', value2)。
在父组件中，$event 对象是一个包含事件数据和附加信息的数组。

代码示例

Child.vue：

<template>
  <button @click="getValue">Get Value</button>
</template>

<script>
export default {
  methods: {
    getValue() {
      this.$emit('getValue', 'someParameter', 'value');
    }
  }
}
</script>

Parent.vue：

<template>
  <Child @getValue="parseValue" />
</template>

<script>
export default {
  methods: {
    parseValue(event) {
      const param = event[0]; // 'someParameter'
      const value = event[1]; // 'value'
      console.log(`Received parameter: ${param}, value: ${value}`);
    }
  }
}
</script>