vue3中如何使用emit事件来与父组件通信

vue3中如何使用emit事件来与父组件通信

在 Vue 3 中，emit 是子组件向父组件通信的主要方式。通过 emit，子组件可以触发一个自定义事件，并传递数据给父组件。以下是详细的使用方法和示例：

1. 基本用法

子组件：触发事件

在子组件中，使用 emit 触发一个自定义事件，并传递数据。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script setup>
// 定义 emit
const emit = defineEmits(['message']);

function sendMessage() {
  // 触发自定义事件 'message'，并传递数据
  emit('message', 'Hello from Child!');
}
</script>

父组件：监听事件

在父组件中，使用 v-on 或 @ 监听子组件触发的自定义事件，并处理数据。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @message="handleMessage" />
    <p>收到消息: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const message = ref('');

function handleMessage(msg) {
  message.value = msg; // 更新父组件的数据
}
</script>

2. 传递多个参数

emit 可以传递多个参数给父组件。

子组件：传递多个参数

<!-- ChildComponent.vue -->
<template>
  <button @click="sendData">发送数据</button>
</template>

<script setup>
const emit = defineEmits(['send']);

function sendData() {
  emit('send', 'Hello', 123, { key: 'value' }); // 传递多个参数
}
</script>

父组件：接收多个参数

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @send="handleData" />
    <p>收到数据: {{ data }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const data = ref('');

function handleData(arg1, arg2, arg3) {
  data.value = `参数1: ${arg1}, 参数2: ${arg2}, 参数3: ${JSON.stringify(arg3)}`;
}
</script>

3. 验证事件

在 Vue 3 中，可以使用 defineEmits 的选项形式来验证事件。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script setup>
const emit = defineEmits({
  // 验证事件参数
  message: (payload) => {
    if (typeof payload === 'string') {
      return true; // 验证通过
    }
    console.warn('无效的消息格式');
    return false; // 验证失败
  },
});

function sendMessage() {
  emit('message', 'Hello from Child!'); // 触发事件
}
</script>

4. 使用 v-model 实现双向绑定

Vue 3 支持通过 emit 实现自定义组件的 v-model 双向绑定。

子组件：实现 v-model

<!-- CustomInput.vue -->
<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

function updateValue(event) {
  emit('update:modelValue', event.target.value); // 触发更新
}
</script>

父组件：使用 v-model

<!-- ParentComponent.vue -->
<template>
  <div>
    <CustomInput v-model="inputValue" />
    <p>输入的值: {{ inputValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

const inputValue = ref('');
</script>

5. 使用 v-model 的多个绑定

Vue 3 支持多个 v-model 绑定。

子组件：实现多个 v-model

<!-- CustomForm.vue -->
<template>
  <div>
    <input :value="firstName" @input="updateFirstName" />
    <input :value="lastName" @input="updateLastName" />
  </div>
</template>

<script setup>
const props = defineProps({
  firstName: String,
  lastName: String,
});

const emit = defineEmits(['update:firstName', 'update:lastName']);

function updateFirstName(event) {
  emit('update:firstName', event.target.value);
}

function updateLastName(event) {
  emit('update:lastName', event.target.value);
}
</script>

父组件：使用多个 v-model

<!-- ParentComponent.vue -->
<template>
  <div>
    <CustomForm
      v-model:firstName="firstName"
      v-model:lastName="lastName"
    />
    <p>全名: {{ firstName }} {{ lastName }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CustomForm from './CustomForm.vue';

const firstName = ref('');
const lastName = ref('');
</script>

总结

• emit：子组件通过 emit 触发自定义事件，向父组件传递数据。

• defineEmits：用于定义和验证事件。

• v-model：通过 emit 实现自定义组件的双向绑定。

• 多个 v-model：支持多个 v-model 绑定。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github