Props的作用
作为父子组件之间的通信一种流向。从父组件传递到子组件。
Props通信
传递静态数据
<!-- 父组件 -->
<blog-post name-test="My journey with Vue"></blog-post>
// 子组件
<script>
export default {
props: {
nameTest:{
type: String, // 字符串
default:''
}
}
}
</script>
传递动态数据
传递动态数据使用：v-bind:xxx。简写 :xxx.
传递一个Number类型
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>
传递一个Boolean类型
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>
传递一个Array类型
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
传递一个Object类型
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>
Props类型校验
子组件接收的方式
-
数组形式
-
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
-
-
对象形式
-
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
-
各个类型校验
Vue.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'].includes(value)
}
}
}
})
Attribute在组件中的使用
一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。也就是，我在子组件中，没有定义对应的Props字段。我如果还要使用该字段怎么办呢？
<!-- 父组件 -->
<nav-btn-group
:size="size"
round
:tabs-data="tabsData"
@handleBtn="handleBtnGroup"
>
</nav-btn-group>
<!-- size和round，我在子组件没有定义 -->
<!-- 子组件 -->
<!-- v-bind="$attrs" -->
<template>
<div class="btn-group">
<el-button-group>
<el-button
v-for="(value, index) in tabsData"
:key="uniqueKey ? value[uniqueKey] : index"
v-bind="$attrs"
:class="{ selectBtn: currSelectIndex === (uniqueKey ? value[uniqueKey] : index) }"
:readonly="isReadonly"
@click="handleBtn(value[uniqueKey] || '', index)"
>
{{ showField ? value[showField] : value }}--{{ $attrs }}--{{ id }}
</el-button>
</el-button-group>
<!-- @slot 右侧自定义-->
<slot />
</div>
</template>
在父组件中，直接写对应的属性，比如如上的button，自身就有size属性。然后在，子组件中，使用v-bind="$attrs"来接收，渲染到指定的元素上。这里还可以了解一下 inheritAttrs属性。
总结
在日常的业务开发中，props传递使用对象的形式比较多。如果是在封装组件中，Attribute的形式你也会用到。
