Vue.js 的组件 prop 属性详解

大家好，欢迎来到IT知识分享网。

prop 属性

我们在实际的开发中， 经常的会用到父组件传递数据到子组件中，这个时候， 就可以用到 prop 属性配置。

本节知识点思维导图

prop 可以让你在组件上注册一些自定义的 attribute。可以是基于数组 prop: [] 的简单语法，也可以是基于对象 prop:{} 的语法。举个例子:

F5 调试查看页面

在实际中， 可能是一个集合数据， 这个时候， 就而已用到我们之前在 v-for 那个教程中没有说的知识点， 就是 v-for 如何在组件中使用。

编写一个简单的例子：

查看效果:

除了静态使用， 和动态使用， 还可以传入另外的数据类型。

传入数值类型

我们增加如下代码来使用整型值，代码如下：

查看效果：

这里不管是什么类型最好都要使用 v-bind 语法进行赋值。 以免不同的数据类型出现结果和你想象中的不一致的情况。

传入布尔值

布尔值需要注意的是 JavaScript 的布尔赋值一致， 所以需要注意。 布尔使用代码如下：

打开效果为：

在这里不管是那种情况下都需要使用绑定指令进行数据的绑定。

传入一个数组

在实际的开发中， 数组的使用应该是最多的， 也是最普通的。毕竟数据都在数组中存放。

直接举例。

浏览器中查看数组例子的效果：

这里使用了各种方式进行数据的传入。 秉承学习从难（复杂）学。 用从易出用。 也就是面试造核， 实际工作 CURD。

传入一个对象

既然能够存放数组， 存放对象也没有问题。 接下来我们看看存放一个对象案例：

这里演示了两种情况， 一个是直接传入表达式（内联），另外一个是传入一个变量。查看效果：

还有一种方式就是使用 properties 进行赋值， 但是这种知道就行了，实际项目中不会这样使用。举例：

<blog-post v-bind:title="post2.title" v-bind:likes="post2.likes" v-bind:is-published="post2.isPublished"> </blog-post>

不做案例演示。

单向数据流

在这里我们说一下 Vue3 中使用 prop 时， 它们的数据流关系为： 单项下行绑定。 父级 prop 的更新会向下流动到子组件中， 但是子组件却不能影响父组件的数据变化。 这里主要是防止子组件意外的变更父级组件状态， 从而导致应用的数据流难以维护使用， 所以在这里实现的方式是子组件没有权利修改父组件传过来的数据， 但是可以请求父组件对原始数据进行修改。

并且父级组件发生变化时，子组件的所有 prop 值都将刷新为最新的值。这种情况下， 我们就不应该在一个子组件内部改变 prop。 并且如果你这样去写代码的时候， Vue 也会在浏览器的控制台发出警告。

如果你真的需要， 这里给出两种方案。 看你的实际使用中的情况而定。

1. 子组件中定义局部变量， 用父级 prop 值赋值给子组件局部变量使用
2. 在子组件中使用计算属性， 处理父级传过来的 prop 值。

先看第一种情况， 我这里纯粹就是为了演示而演示， 没有实际意义。定义了一个postShow 用来控制子组件的显示隐藏， 并在子元素中赋值给了另外一个变量， 内部修改变量， 不会影响父组件。

查看效果， 默认情况下：

点击显示， 显示内容。

这个时候， 我们单击内部的显示/隐藏。 发现内部的变量在发生变化， 父类并没有变化。

第二种是使用计算属性， 从使用程度上来说和第一种很类似。

把上面的代码修改成如下：

刷新查看效果。

也是一样的效果。因为计算属性的默认只读， 也就无法修改子组件的变量数据了。

但是这里需要注意两个问题：

第一： 在传入的对象是数组或者对象的情况下， 子组件的数据修改，会影响到父组件的状态。需要悉知。

第二：关于HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名， 但是这个不包含在字符串模版里面。 具体可以看上面的参考例子。 自己尝试在做实际的案例时不要只做正确的，也写一些错误的案例。用单元测试的方式进行技术的学习是一个很好的方式。

prop 的验证

在传入 prop 的时候，可以在子组件中定义 prop 的数据类型或者叫做字段检验器。 做一些提示和约束的操作。

先看一个例子：

查看验证的效果：

因为这里我校验了 isPublished 为 Boolean 值类型， 但是传入的却是一个数值类型的， 所以后台有一个警告信息。这个作用就可以用在开发组件时对一些变量的时候做到完善的提示和校验。

校验的类型可以是下列原生类型之一：

• String
• Number

• Boolean
• Array

• Object
• Date

• Function
• Symbol

prop 属性告一段落， 接下来我们看看怎么来使用组件中的事件。再开一篇。 保证每篇文章的篇幅不要过长。