20250311-vue-Props1
20250311-vue-Props1
Props 声明
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。
props 需要使用 props 选项来定义：
export default {
props: ['foo'],
created() {
// props 会暴露到 `this` 上
console.log(this.foo)
}
}除了使用字符串数组来声明 props 外，还可以使用对象的形式：
export default {
props: {
title: String,
likes: Number
}
}对于以对象形式声明的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是
number
类型，则可使用
Number
构造函数作为其声明的值。
对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。
传递 prop 的细节
Prop 名字格式
如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JS 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。
属性key名
export default {
props: {
greetingMessage: String
}
}模板表达式
<span>{{ greetingMessage }}</span>虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式，但实际上为了和 HTML attribute 对其，我们通常会将其写为 kebab-case 形式：
<MyComponent greeting-message="hello" />组件名使用 PascalCase 提高了模板的可读性，能帮助区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说，使用 camelCase 并没有太多优势，推荐使用更贴近 HTML 的书写风格。
静态 vs. 动态 Props
静态值形式的 props：
<BlogPost title="My journey with Vue" />使用 v-bind 或缩写 : 来进行动态绑定的 props：
<!-- 根据一个变量的值动态传入 -->
<BlogPost :title="post.title" />
<!-- 根据一个更复杂表达式的值动态传入 -->
<BlogPost :title="post.title + ' by ' + post.author.name" />传递不同的值类型
在上述的两个例子中，我们只传入了字符串值，但实际上任何类型的值都可以作为 props 的值被传递。
Number
<!-- 虽然 '42' 是个常量，我们还是需要使用 v-bind
因为这是一个 JS 表达式而不是一个字符串 -->
<BlogPost :likes="42" />
<!-- 根据一个变量的值动态传入 -->
<BlogPost :likes="post.likes" />Boolean
<!-- 仅写上 prop 但不传值，会隐式转换为 `true` -->
<BlogPost is-published />
<!-- 虽然 `false` 是静态的值，我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :is-published="false" />
<!-- 根据一个变量的值动态传入 -->
<BlogPost :is-published="post.isPublished" />Array
<!-- 虽然这个数组是个常量，我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :comment-ids="[234, 266, 273]" />
<!-- 根据一个变量的值动态传入 -->
<BlogPost :comment-ids="post.commentIds" />Object
<!-- 虽然这个对象字面量是个常量，我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost
:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
/>
<!-- 根据一个变量的值动态传入 -->
<BlogPost :author="post.author" />使用一个对象绑定多个 prop
如果你想要将一个对象的所有属性都当作 props 传入，你可以使用没有参数的 v-bind，即只使用 v-bind 而非 :prop-name。例如，这里有一个 post 对象：
export default {
data() {
return {
post: {
id: 1,
title: 'My Journey with Vue'
}
}
}
}以及下面的模板：
<BlogPost v-bind="post" />而这实际上等价于：
<BlogPost :id="post.id" :title="post.title" />