vue3 中 defineProps 和 defineEmits

本文主要是介绍vue3 中 defineProps 和 defineEmits，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 Vue 3 中，defineProps 和 defineEmits 是组合式 API 的核心功能，用于处理父子组件之间的传值和事件通信。

1. defineProps

defineProps 用于定义并接收父组件传递过来的数据（props）。它是在子组件中使用的，接收的数据可以是各种类型。

// 子组件
<template><div><h1>title：{{ title }}</h1><p>count：{{ count }}</p></div>
</template><script setup>
import { defineProps } from 'vue'// 接收父组件传递的 props
const props = defineProps({title: String,count: Number
})
</script>

// 父组件
<template><Child title="Hello, World!" :count="10" />
</template><script setup>
import Child from './Child.vue';
</script>

2. defineEmits

defineEmits 用于定义并触发子组件向父组件发送的事件。父组件可以通过监听这些事件来执行相应的操作。

<!-- 父组件 -->
<template><Child @update="handleUpdate" />
</template><script setup>
import Child from './Child.vue';// 处理子组件传来的事件
const handleUpdate = (value) => {console.log('Updated value from child:', value);
};
</script>

<!-- 子组件 -->
<template><button @click="sendUpdate">Click to Update</button>
</template><script setup>
import { defineEmits } from 'vue';// 定义事件
const emit = defineEmits(['update']);const sendUpdate = () => {emit('update', 'new value'); // 触发 update 事件并传递参数
};
</script>

3. 使用 TypeScript 定义类型

在 Vue 3 中结合 TypeScript 时，defineProps 和 defineEmits 可以使用更严格的类型检查，提升代码的健壮性。

// 子组件
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';// 定义 props 的类型
const props = defineProps<{title: string;count: number;
}>();// 定义 emit 的事件和类型
const emit = defineEmits<{(event: 'update', newTitle: string): void;
}>();const updateTitle = () => {emit('update', 'New Title with TS'); // 触发事件并传递参数
};
</script>

这篇关于vue3 中 defineProps 和 defineEmits的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---