Vue的Prop配置

文章目录

1、Prop 的大小写
2、Prop 类型
3、Prop验证
4、传递静态|动态 Prop
5、修改Prop数据

适用于：父子组件通信。

如果父组件给子组件传递(函数)数据：本质是子组件给父组件传递数据；
如果父组件给子组件传递的(非函数)数据：本质就是父组件给子组件传递数据。

路由组件也可以传递 props数据。

1、Prop 的大小写

HTML 中的属性名大小写不敏感，浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

子组件接收数据：

Vue.component('blog-post', {// 在 JavaScript 中是 camelCase (驼峰命名法)props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'
})

父组件传数据：

<!-- 在 HTML 中是 kebab-case 短横线分隔命名 -->
<blog-post post-title="hello"></blog-post>

2、Prop 类型

子组件指定（限制）父组件传入的Prop的值的类型。当子组件接收到错误的类型时从浏览器的 JavaScript 控制台提示用户。

// 接收数据并对数据进行类型限制
props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor
}

不限制Prop类型是这样写：

// 简单的声明接收（不能声明不传过来的数据）
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

3、Prop验证

在子组件定制接收的 prop 的验证方式，可以为 props 中的值提供一个带有验证需求的对象。如果有一个需求未满足，则 Vue 会在浏览器控制台中警告。

  props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {// propC的类型type: String,// 设置 propC 必须传递过来   required: true},// 带有默认值的数字propD: {type: Number,// propD可传可不传，不传则值默认为100default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}

4、传递静态|动态 Prop

传入一个字符串

传静态值：

<blog-post title="hello"></blog-post>

prop 通过 v-bind 动态赋值：

<!-- 动态赋予一个变量的值，该变量值post.title是字符串 -->
<blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 ，post.title和post.author值是字符串-->
<blog-postv-bind:title="post.title + ' and ' + post.author"
></blog-post>......
data() {return {post: { title:"aaa", author:"bbb" },}
}

以上传入的值都是字符串类型的，但任何类型的值都可以传给 prop，如：

传入一个数字

<!-- 即便 `42` 是静态的，仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

传入一个布尔值

<!-- 包含该 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>

传入一个数组

<!-- 即便数组是静态的，仍然需要 `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>

传入一个对象

<!-- 即便对象是静态的，仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-postv-bind:author="{name: 'Veronica',company: 'Veridian Dynamics'}"
></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

传入一个对象的所有 property

<blog-post v-bind="post"></blog-post>
......
post: {id: 1,title: 'My Journey with Vue'
}

5、修改Prop数据

若想对接收的prop数据进行修改,则需要在data中重新定义，不能直接对prop修改，即this.postTitle = "hhh"会报错。

<h3>{{ postTitle }}</h3>
<h3>{{ myTitle }}</h3>
<button @click="xiu"></button>
......// 在 js 中是 camelCase 驼峰命名法 props: ['postTitle'],// 若想对接收的prop数据进行修改,则需要在data中重新定义，不能直接对prop修改，即this.postTitle = "hhh"会报错。......data() {return {myTitle: this.postTitle,}},methods: {xiu() {this.myTitle = "hhh";}}

注意：也可以不写：props: ['postTitle']来接收，因为this.$attrs中有传来的数据postTitle ，可以直接使用。但是我们一般不这样写。因为不能限制类型，写着麻烦等。

当接收props: ['postTitle']时，this.$attrs中就不存在传来的数据postTitle 了。