vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3中emit使用

一文带你深入理解Vue3中的emit使用

作者:OEC小胖胖

这篇文章主要介绍了Vue3中通过emit实现父子组件通信的方法,包括基础概念、使用方法、配合props实现完整父子通信、在TypeScript中的类型推断以及注意事项与最佳实践,需要的朋友可以参考下

前言

在 Vue 3 中,组件通信是开发中非常重要的一部分,其中通过 emit 实现父子组件通信是最常见的方式之一。emit 的作用是:子组件可以通过触发自定义事件将数据传递给父组件

一、基础概念

什么是 emit?

emit 是 Vue 提供的一个方法,允许子组件通过事件触发的方式与父组件进行通信。父组件通过监听事件来响应子组件的行为。

使用场景

二、使用方法与语法

子组件中触发事件

在 setup 中,通过组件实例的 emit 函数触发事件。使用 defineProps 和 defineEmits 是 Vue 3 中推荐的组合式 API 语法。

示例代码

<!-- 子组件 -->
<script setup>
import { defineEmits } from 'vue';

// 定义触发的事件及其数据类型
const emit = defineEmits(['update', 'delete']);

// 触发事件
const handleUpdate = () => {
  emit('update', { id: 1, name: 'Vue 3' });
};

const handleDelete = () => {
  emit('delete', 1); // 触发 delete 事件,传递一个 ID
};
</script>

<template>
  <button @click="handleUpdate">更新</button>
  <button @click="handleDelete">删除</button>
</template>

父组件中监听事件

<!-- 父组件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';

const handleUpdate = (data) => {
  console.log('更新事件触发:', data);
};

const handleDelete = (id) => {
  console.log('删除事件触发,ID:', id);
};
</script>

<template>
  <ChildComponent @update="handleUpdate" @delete="handleDelete" />
</template>

三、配合 props 实现完整父子通信

子组件与父组件完整通信流程

示例代码

<!-- 子组件 -->
<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props 和 emit
const props = defineProps({
  value: String
});

const emit = defineEmits(['input']);

// 修改输入时触发 input 事件
const handleInput = (event) => {
  emit('input', event.target.value);
};
</script>

<template>
  <input :value="value" @input="handleInput" />
</template>
<!-- 父组件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const inputValue = ref('初始值');

const handleInput = (value) => {
  inputValue.value = value;
};
</script>

<template>
  <ChildComponent :value="inputValue" @input="handleInput" />
  <p>父组件中的值:{{ inputValue }}</p>
</template>

四、在 TypeScript 中的类型推断

Vue 3 的组合式 API 提供了强大的类型支持。通过 defineEmits 和 defineProps,可以轻松为事件添加类型约束。

示例代码

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';

// 定义 props 类型
interface Props {
  value: string;
}

// 定义 emits 类型
type Emits = {
  (event: 'input', value: string): void;
  (event: 'delete'): void;
};

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 使用 emit
const handleInput = (value: string) => {
  emit('input', value);
};

const handleDelete = () => {
  emit('delete');
};
</script>

五、注意事项与最佳实践

六、总结

emit 是 Vue 3 中实现父子组件通信的核心工具,它的使用非常灵活,适合小型应用中的局部通信。搭配 props 使用,可以实现完整的数据流动。

附:注意事项

1、事件名称区分大小写

Vue 3 中的事件名称是区分大小写的。这意味着 @update 和 @Update 是两个不同的事件名称。在子组件和父组件中,确保事件名称的一致性非常重要。

2、事件参数传递

使用 emit 可以传递多个参数,这些参数将在父组件中对应的事件处理函数中接收到,并且需要按照顺序正确接收它们。

// 子组件
emit('update', 'value1', 'value2');

// 父组件
<Child @update="handleUpdate" />

<script setup>
const handleUpdate = (param1, param2) => {
  console.log(param1, param2); // param1 = 'value1', param2 = 'value2'
};
</script>

3、事件参数类型

在使用 TypeScript 时,defineEmits 可以定义事件和参数的类型。不仅可以提高代码的安全性,还能在开发过程中获得更好的类型提示。

const emit = defineEmits<{ (event: 'update', value: string): void }>();

emit('update', 'newValue'); // 正确
emit('update', 123); // 错误,类型不匹配

4、确保事件已声明

通过 defineEmits 定义子组件中的事件时,要确保所有可能触发的事件都已声明。未声明的事件将无法通过 emit 触发。

const emit = defineEmits(['update', 'delete']);

emit('update', 'newValue'); // 正确
emit('delete'); // 正确
emit('add'); // 错误,未声明 'add' 事件

5、避免滥用事件

在设计组件时,尽量减少事件的种类和数量,尤其是在组件树较为复杂时。过多的事件可能导致代码难以维护和调试。

到此这篇关于Vue3中emit使用的文章就介绍到这了,更多相关Vue3中emit使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文