Vue3手册译稿 - 深入组件 - pros
[info]学习本节，你应该已了解过组件基础
prop类型
前面我们讨论过，props可以是一个字符列表的数组。
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']但是有时候，我们需要传递一些特别的类型数据。这种情况下，我们可以在列表中传递对象，同时传递属性名称和类型即可：
props: { title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // 或其他任何结构
}
如果类型传递错误，不仅仅只是参考上面的文档自查，同时还会通过浏览器控制台向用户告警。如果想了解类型相关内容，请参考类型检测和props其它类型验证。
传递静态或动态的props
前面传递一个静态prop的方法为：
<blog-post title="My journey with Vue"></blog-post>你也可以使用v-bind或缩写为:来传递动态的props：
<!-- 静态 --><blog-post :title="post.title"></blog-post>
<!-- 动态传递复杂的静态式 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>
通过以上两个示例，我们可以传递任何类型数据到props。
传递数字
<!-- 即使`42`是一个静态数字，我也要动态的告诉Vue --><!-- 使用JavaScript表达式比使用字符串更好 -->
<blog-post :likes="42"></blog-post>
<!-- 动态付值. -->
<blog-post :likes="post.likes"></blog-post>
传递布尔值
<!-- 空值为`true`. --><blog-post is-published></blog-post>
<!-- 即使`false`是静态值，也要`v-bind` -->
<!-- 使用JavaScript表达式比使用字符串更好 -->
<blog-post :is-published="false"></blog-post>
<!-- 动态传值. -->
<blog-post :is-published="post.isPublished"></blog-post>
传数组
<!-- 静态值也`v-bind` --><!-- js表达式比字符串好. -->
<blog-post :comment-ids="[234, 266, 273]"></blog-post>
<!-- 动态 -->
<blog-post :comment-ids="post.commentIds"></blog-post>
传对象
如果你想把一个对象的所有属性传给prop，你可以使用v-bind(可以使用:代替)。例如有一个post对象：
post: { id: 1,
title: 'My Journey with Vue'
}
模板：
<blog-post v-bind="post"></blog-post>与下面效果一致
<blog-post v-bind:></blog-post>单向数据流
所有的props是父子组件间的单向绑定：当父组件属性更新时会传递给子组件，但反之却不行。这会阻止子组件意外的更改父容器的状态，会导致你的应用数据流难以理解。
另外，每次父组件更新时，所有子组件的props都会同步刷新。这意味着你不要在子组件中更改prop属性的值。如果你这样做了，Vue会在控制台告警。
有两种情形会尝试转变prop：
1.prop传递一个初始值，然后子组件希望当成一个局部变量来使用。这种情部最后再定义一个局部变量并用prop赋值。
props: ['initialCounter'],data() {
return {
counter: this.initialCounter //这个局部变量只在这个子组件实例内有效
}
}
prop传递的是一个原始数据，需要进行转换才能使用。这种情况下最好用计算属性为转换prop：
props: ['size'],computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
[info]提示
注意如果JavaScript的对象和数组类型是关联起来的，子组件更改这两种类型数据，会影响到父组件的状态。
prop验证
组件prop有专门的需求关系，如前面提到的数据类型。如果需求不满足，Vue就会通过浏览器控制台告警。这对组件计划给其他人使用时尤其有用。props的验证，你可以提供一个含有需求验证的对象，来替代数组或字符串：
app.component('my-component', { props: {
// 基础类型验证 (`null` 和`undefined` 可以传递任何类型)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必传项，类型字符串
propC: {
type: String,
required: true
},
// 含有默认值的数值类型
propD: {
type: Number,
default: 100
},
// 含有默认值的对象类型
propE: {
type: Object,
// 对象或数组的默认值必须来自
// 一个工厂函数
default: function() {
return { message: 'hello' }
}
},
// 自定义验证
propF: {
validator: function(value) {
// 值必须是下面之一
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
// 有默认值的函数
propG: {
type: Function,
// 不像对象或数组的默认值, 这不是工厂函数 - 这是一个用着默认值的函数
default: function() {
return 'Default function'
}
}
}
})
当prop验证失败时，Vue会发送一个控制台告警（如果使用开发模式构建）
[info]提示
注意
prop会在组件创建之前进行验证，所以实例属性（如data,computed等）在default或validator函数内部都不可用
类型检测
类型可以是以下原生结构：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
另外，类型可以是一个自定义构造函数且通过instanceof进行检查确认。例如下面的构造函数：
function Person(firstName, lastName) { this.firstName = firstName
this.lastName = lastName
}
你可以这样使用：
app.component('blog-post', { props: {
author: Person
}
})
可以通过new Person来验证author参数。
prop大写小(短横线 VS 驼峰)
HTML标签大小写不敏感，所以浏览器会所有的大写字母理解为小写。这意味着你使用驼峰定义的prop在模板内使用时应该用短横线分隔，是等效的：
const app = Vue.createApp({})app.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- HTML中使用短横线分隔 --><blog-post post-title="hello!"></blog-post>
再说一遍，如果你使用字符串模板，这些限制都不会生效。
以上是 Vue3手册译稿 - 深入组件 - pros 的全部内容， 来源链接： utcz.com/z/377353.html
