Vue3:defineProps接收父组件传递的数据
在Vue 3的Composition API中，defineProps是一个编译时宏，用于在<script setup>标签中声明props。当你使用defineProps定义了一个prop（如dialogVisibleType）后，你可以直接在<script setup>的上下文中访问这个prop的值，而不需要额外的步骤来“取出”它。
这里是一个简单的例子，展示了如何在<script setup>中使用defineProps来定义和访问dialogVisibleType prop：
<script setup>
import { defineProps } from 'vue';
// 定义一个名为dialogVisibleType的prop
const props = defineProps({
dialogVisibleType: {
type: String, // 假设我们期望这是一个字符串
default: 'default', // 提供一个默认值
},
});
// 现在你可以直接通过props.dialogVisibleType来访问这个prop的值
console.log(props.dialogVisibleType); // 这将输出传递给组件的dialogVisibleType prop的值
// 你也可以在模板中直接使用它
</script>
<template>
<div>
<!-- 使用插值表达式显示prop的值 -->
<p>Dialog Visible Type: {{ dialogVisibleType }}</p>
<!-- 注意：在模板中直接使用时，可以省略props前缀，因为Vue会自动处理 -->
</div>
</template>
然而，需要注意的是，在模板中直接使用prop时（如上例中的<p>Dialog Visible Type: {{ dialogVisibleType }}</p>），你不需要通过props对象来访问它。Vue的模板编译器会自动处理这种情况，让你能够直接通过prop的名称来访问它。
但如果你在<script setup>的JavaScript代码中访问它，你需要通过props对象来访问，即props.dialogVisibleType。
总结一下，defineProps用于在<script setup>中声明props，并通过props对象来访问这些props的值。在模板中，你可以直接通过prop的名称来访问它们。