原文：How to Use Props in Vue.js，作者：Joel Olawanle
我们使用 props 将信息/数据从父组件传递到子组件。在这篇文章中，我将解释你需要知道的关于 props 的一切，以及为什么你应该在 Vue.js 中使用 props。
以下是我们将在本指南中介绍的内容的简要概述：
Vue.js 中的 props 是什么？如何在组件内注册 props如何使用多个 props Vue.js props 类型如何将数据传递给 props如何将函数传递给 props如何验证 props如何设置 props 的默认值Vue.js 中的 Props 是什么props 是一个特殊的关键字，代表属性。它可以在组件上注册，以将数据从父组件传递到其子组件之一。
与为 Vue.js 应用程序使用状态管理库（如 vuex）相比，这要容易得多。
props 中的数据只能以一种方式流动——从顶部或父组件到底部或子组件。这意味着你不能将数据从子级传递给父级。
要记住的另一件事是，props 是只读的，不能由子组件修改，因为父组件“拥有”该值。
现在让我们平衡一下——父组件将 props 传递给子组件，而子组件向父组件发出事件。
如何在组件中注册 Props现在让我们看看如何在组件中注册 props。
Vue.component('user-detail', {
props: ['name'],
template: '
Hi {{ name }}
'})
.js或者，在 Vue Single File Component 中：
{{ name }}
在上面的代码中，我们注册了一个名为 name 的 props，我们可以在应用程序的模板部分调用它。
注意：这是子组件，这个 props 将从父组件接收数据。稍后我将对此进行更多解释。
如何使用多个 Pros你可以通过将它们附加到 props 数组来拥有多个 props，就像这样：
Vue.component('user-detail', {
props: ['firstName', 'lastName'],
template: '
Hi {{ firstName }} {{ lastName }}
'})在 Vue Single File Component 中：
Hi {{ firstName }} {{ lastName }}
Vue.js Prop 类型要指定要在 Vue 中使用的 props 类型，你将使用对象而不是数组。你将使用属性的名称作为每个属性的键，使用类型作为值。
如果传递的数据类型与 prop 类型不匹配，Vue 会在控制台中发送警告（在开发模式下）。你可以使用的有效类型是：
字符串数字布尔值数组对象日期函数SymbolVue.component('user-detail', {
props: {
firstName: String,
lastName: String
},
template: '
Hi {{ firstName }} {{ lastName }}
'})或者在一个 Vue Single File Component 中：
Hi {{ firstName }} {{ lastName }}
在 Vue 中如何将数据传递给 Props使用 props 的主要目标是传递数据/信息。你可以使用 v-bind 将值作为数据属性传递，例如在以下代码中：
或像这样作为静态值：
这是父组件：
这是子组件：
上面的代码向你展示了当你从父组件获取数据并在子组件中使用该数据时如何使用数据属性和静态值。
注意：你还可以在 props 值中使用三元运算符来检查真实条件并传递依赖于它的值。
在上面的代码中，我们检查了 signedUp 数据属性。如果为真，则发送的数据应为 Logout，否则应为 Login。
如何将函数传递给 Props将函数或方法作为 props 传递给子组件相对简单。这与传递任何其他变量的过程基本相同。
但是你不应该使用 props 作为函数是有原因的——你应该使用 emit。这篇文章正确地解释了原因。
如何在 Vue 中验证 PropsVue 使验证 props 变得非常容易。你所要做的就是将所需的键及其值添加到 props 中。我们可以使用 prop 类型和 required 进行验证：
props: {
name: {
type: String,
required: true
}
}如何设置默认 Prop 值在结束本文之前，让我们看看如何为我们的 props 设置默认值。如果子组件无法从父组件获取数据，则会呈现默认值。
Vue 允许你指定一个默认值，就像我们之前指定的 required 一样。
props: {
name: {
type: String,
required: true,
default: 'John Doe'
},
img: {
type: String,
default: '../image-path/image-name.jpg',
},
}你还可以将默认值定义为对象。它可以是一个返回适当值的函数，而不是实际值。
结论在本文中，我们了解了 props 的作用以及 props 在 Vue.js 中的工作原理。
概况地说，我们使用 props 将数据从父组件传递到子组件。如果你需要将数据/事件从子组件发送到父组件，那么子组件还会向父组件发出事件。
谢谢你阅读本文！
参考链接
Vue.js 组件 Props - flaviocopesProps - Vue 文档