前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）

如果你用过第三方 vue UI 组件框架，甚至看过他们的代码，那么你对 props 这个 vue 常用属性并不陌生。

简单介绍下

props 是组件交互中用来接收父组件数据的那么一个属性，它的语法定义有那么些“杂”，并且你可以根据需要对这些传入的数据进行合法性校验，以让自己的组件更好的工作。下面就来看下 props 的用法吧。

props 的大小写定义

我们知道 Html 中对属性名称的大小写不敏感，多数情况会把大写的字符转成小写。所以如果你尝试定义驼峰方式的属性（camelCase）时，在 Html 处就需要以等价的短横线方式（kebab-case）来替换。以免发生非预期的错误。

如下图，userName 和 user-name 的命名定义：

子组件 props 属性

父组件 模板

数据类型

props 可以是 array or object，其中对象类型的方式可以允许更多的高级选项（如，类型检测、自定义校验、设置默认值）

数组方式

这是一个简单的方式，你可以把所需要的值都放到数组中，他们的类型默认是字符串。

数组方式

对象方式

多数情况，该方式会对组件代码有个更好的管控，如果你有特殊的需求。

对象方式

当然我们可以更细化的设置 props 属性，基于对象语法提供了如下选项：

type: 定义数据类型：String、Number、Boolean、Array、Object、Date、Function、Symbol

default：默认值，如果父组件没有设置传入值得话。Object 和 Array 必须通过函数的方式返回（因为内部 vue 会通过 call 来调用）

required：Boolean。设置当前属性是否必选。

validator：Function。自定义校验函数。

props 数据校验

通过下图，来说下各种选项的实际运用，同时看下对应的父组件模板如何设置：

数据类型使用

父模板定义

单项数据流

相信如果你是个经验丰富的程序员，一定看多过这样的错误：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

意思是不要试图在子组件中修改 prop 的属性值，这样会让子组件意外父级组件的状态，从而导致你的应用的数据流向难以理解。

如下是个错误的示范：

错误示范

有两种方式去变向实现这样的需求：

1. 在子组件的 data 属性中，新增加一个属性，来代替原 prop 属性的更改

2. 如果需要对 prop 进行转换，相当于一个 filter 功能，可以用计算属性来替代

非 prop 属性

可能这个属性不是经常用到。如果你有这样的需求：

父组件上设置了子组件 prop 中没有的属性，没有实际作用，但不想在最后的渲染的模板中出现这样的属性的话。

可以设置：

它将屏蔽所有的非 props 之外的属性设置。

总结

介绍了 props 的命名规范，说明了 props 属性在数据类型定义以及数据验证上的使用方式，最后说了下单项数据流的变向处理方案。

关于我

一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。

关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。

点击 ↙ 了解更多，了解更多前端开发技术文章。