在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的名称来访问它们。

更多推荐