当前位置：首页 > article >正文

Vue3:defineProps接收父组件传递的数据

article 2024/11/13 8:57:37

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

查看全文

http://www.kler.cn/a/311476.html