Vue Props 声明：修订间差异
跳到导航
跳到搜索
（创建页面，内容为“ 一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute 。 在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明： ```vue <script setup> const props = defineProps(['foo']) console.log(props.foo) </script></pre> 除了使用字符串数组来声明 prop 外，还可以使用对象的形式： <syntaxhighlight lang="js"…”） |
无编辑摘要 |
||
| 第4行： | 第4行： | ||
在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明： | 在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明： | ||
<pre> | |||
<script setup> | <script setup> | ||
const props = defineProps(['foo']) | const props = defineProps(['foo']) | ||
| 第10行： | 第10行： | ||
console.log(props.foo) | console.log(props.foo) | ||
</script></pre> | </script></pre> | ||
除了使用字符串数组来声明 prop 外，还可以使用对象的形式： | 除了使用字符串数组来声明 prop 外，还可以使用对象的形式： | ||
| 第17行： | 第18行： | ||
likes: Number | likes: Number | ||
})</syntaxhighlight> | })</syntaxhighlight> | ||
对于以对象形式声明中的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。 | 对于以对象形式声明中的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。 | ||
2024年1月30日 (二) 09:32的最新版本
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute 。
在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：
<script setup> const props = defineProps(['foo']) console.log(props.foo) </script>
除了使用字符串数组来声明 prop 外，还可以使用对象的形式：
// 使用 <script setup>
defineProps({
title: String,
likes: Number
})
对于以对象形式声明中的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。