在 Vue 组件中，props 是一种用于从父组件向子组件传递数据的机制。props 可以接收父组件传递过来的任意类型的数据，并在子组件中进行使用。本文将对 Vue 组件 props 的使用做一个总结，包括 props 的定义、使用、类型、默认值等方面的内容。
定义 props
要在 Vue 组件中定义 props，需要在子组件中使用 props 选项。props 选项可以是一个数组或对象，其中每个项表示一个 prop 名称以及它的验证规则：
-- -------------------- ---- -------
----------------------------- -
------ -
-- ------ ------- -----------
------ -------
-- ----
------ -------- --------
-- -------
------ -
----- -------
--------- ----
--
-- -------
------ -
----- -------
-------- ---
--
-- --------------------
------ -
----- -------
-------- -------- -- -
------ - -------- ------- -
-
--
-- -------
------ -
---------- -------- ------- -
------ ----- - --
-
-
-
--在子组件中定义了 props 后，就可以通过 props 的名称来访问它们。例如，在上面的示例中，可以通过 this.propA 来访问 propA。
使用 props
在子组件中使用 props 时，可以直接将其放在模板中使用。例如，可以这样做：
<!-- 常规用法 -->
<div>{{ propA }}</div>
<!-- 如果 propA 没有传入，则显示默认值 'default value' -->
<div>{{ propA || 'default value' }}</div>在使用 props 时，要注意一些细节。如果一个 prop 没有传入，那么它在子组件中将是 undefined。这时，如果直接在模板中使用该 prop，将会导致一个警告。因此，推荐使用上面的这种写法来处理。
props 类型
在定义 props 时，可以通过类型验证来限制 props 接收到的数据类型。Vue 支持的类型有：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
同时，Vue 也支持验证多种类型。例如，下面的代码可以验证一个 prop 是一个字符串或者数字：
Vue.component('my-component', {
props: {
propA: {
type: [String, Number],
required: true
}
}
})props 默认值
在定义 props 时，可以通过 default 选项来定义默认值：
Vue.component('my-component', {
props: {
propA: {
type: String,
default: 'default value'
}
}
})如果一个 prop 没有传入值，那么它的值将是 undefined。但是，有时候我们希望它有一个默认值。通过在 props 中定义 default 属性，我们就可以实现这个目的。
总结
通过本文的介绍，我们了解了 Vue 组件 props 的定义、使用、类型、默认值等方面的内容。我们可以通过 props 实现父子组件之间的数据传递，从而更好地控制应用程序的数据流。同时，对于想要更好地掌握 Vue 组件 props 使用的开发者，建议多多实践，多多思考，不断提高自己的开发技能。
示例代码：
-- -------------------- ---- -------
---- --- ---
----------
------------- -------------- ------------------------------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----------- -
-----------
-
-
---------
---- --- --------------- ---
----------
-----
------- ----- --------
------- ----- --------
------
-----------
--------
------ ------- -
------ -
------ -
----- -------
-------- -------- ------
--
------ -
----- -------
--------- ----
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f02e1ff6b2d6eab3a1f7d0