我们使用props将信息/数据从父组件传递给子组件。在这篇文章中，我将解释你需要知道的关于props的一切，以及为什么你应该在Vue.js中使用props。
以下是本指南所要介绍的内容的简要概述。
- 什么是Vue.js中的props？
- 如何在一个组件中注册props
- 如何使用多个道具
- Vue.js的道具类型
- 如何将数据传递给props
- 如何将函数传递给props
- 如何验证props
- 如何设置道具的默认值
什么是Vue.js中的Props？
"Props "是一个特殊的关键词，代表着属性。它可以被注册在一个组件上，以便将数据从一个父组件传递给它的一个子组件。
与使用Vue.js应用程序的状态管理库（如vuex）相比，这要容易得多。
道具中的数据只能单向流动--从顶部，即父组件，到底部，即子组件。这简单地意味着你不能把数据从子组件传到父组件。
另一件要记住的事情是，Props是只读的，子组件不能修改，因为父组件 "拥有 "这个值。
现在让我们来平衡一下--父组件向子组件传递道具，而子组件向父组件发出事件。
如何在一个组件中注册道具
现在让我们来看看如何在一个组件中注册道具。
Vue.component('user-detail', {
props: ['name'],
template: '<p>Hi {{ name }}</p>'
})
.js
或者说，在一个Vue单文件组件中。
<template>
<p>{{ name }}</p>
</template>
<script>
export default {
props: ['name']
}
</script>
在上面的代码中，我们注册了一个名为name 的道具，我们可以在应用程序的模板部分调用。
注意：这是子组件，这个道具将从父组件接收数据。我将在后面进一步解释。
如何处理多个道具
你可以通过将它们追加到props数组中来拥有多个prop，就像这样。
Vue.component('user-detail', {
props: ['firstName', 'lastName'],
template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})
或者，在一个Vue单文件组件中。
<template>
<p>Hi {{ firstName }} {{ lastName }}</p>
</template>
<script>
export default {
props: [
'firstName',
'lastName'
],
}
</script>
Vue.js道具类型
为了指定你想在Vue中使用的道具类型，你将使用一个对象而不是一个数组。你将使用属性的名称作为每个属性的键，而类型作为值。
如果传递的数据类型与道具类型不匹配，Vue会在控制台中发送一个警告（在开发模式下）。你可以使用的有效类型是
- 字符串
- 数字
- 布尔型
- 数组
- 对象
- 编码
- 符号
- 符号
Vue.component('user-detail', {
props: {
firstName: String,
lastName: String
},
template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})
或者，在Vue单文件组件中。
<template>
<p>Hi {{ firstName }} {{ lastName }}</p>
</template>
<script>
export default {
props: {
firstName: String,
lastName: String
},
}
</script>
如何在Vue中向道具传递数据
使用props的主要目的是传递数据/信息。你可以使用v-bind将你的值作为数据属性传递，比如在这段代码中。
<template>
<ComponentName :title=title />
</template>
<script>
export default {
//...
data() {
return {
title: 'Understanding Props in vuejs'
}
},
//...
}
</script>
或者像这样作为一个静态值。
<ComponentName title="Understanding Props in vuejs" />
假设我们正在建立一个应用程序，其中有许多具有不同文本/背景颜色的按钮。与其在我们所有的文件中重复按钮的语法，不如创建一个按钮组件，然后将文本/背景颜色作为props传递。
这里是父组件。
<template>
<div id="app">
<Button :name='btnName' bgColor='red' />
<Button :name='btnName' bgColor='green' />
<Button :name='btnName' bgColor='blue' />
</div>
</template>
<script>
import Button from './components/Button'
export default {
name: 'App',
data(){
return{
btnName:"Joel",
}
},
components: {
Button
}
}
</script>
这里是子组件。
<template>
<button class="btn" :style="{backgroundColor:bgColor}">{{name}}</button>
</template>
<script>
export default {
name: 'Button',
props:{
name:String,
bgColor:String
}
}
</script>
上面的代码向你展示了当你从父组件获取数据并在子组件中使用这些数据时如何使用数据属性和静态值。
**注意：**你也可以在prop值里面使用一个三元操作符来检查一个真实的条件，并传递一个取决于它的值。
<template>
<div id="app">
<Button :tagUser="signedUp ? 'Logout' : 'Login'" bgColor='red' />
</div>
</template>
<script>
import Button from './components/Button'
export default {
name: 'App',
data(){
return{
signedUp: true,
}
},
components: {
Button
}
}
</script>
在上面的代码中，我们正在检查signedUp data属性。如果它是真的，发送的数据应该是Logout， ，否则应该是 Login。
如何将函数传递给道具
将一个函数或方法作为一个道具传递给一个子组件是相对简单的。这基本上与传递任何其他变量的过程相同。
但是有一些原因，你不应该把道具作为函数使用--而是应该使用emit。这篇文章正确地解释了原因。
<template>
<ChildComponent :function="newFunction" />
</template>
<script>
export default {
methods: {
newFunction() {
// ...
}
}
};
</script>
如何在Vue中验证道具
Vue让验证props变得非常容易。你所要做的就是在道具中添加所需的键和它的值。我们可以通过道具类型和使用required 来进行验证。
props: {
name: {
type: String,
required: true
}
}
如何设置默认的道具值
在结束本文之前，现在让我们看看如何为我们的道具设置默认值。如果子组件无法从父组件获得数据，就会呈现默认值。
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将数据从父组件传递给子组件。子组件也向父组件发出事件，以备你需要从子组件向父组件发送数据/事件。
谢谢您的阅读!
有用的链接
前端开发员和技术撰稿人
如果你读到这里，请发推特给作者，向他们表示你的关心。鸣谢
免费学习代码。freeCodeCamp的开源课程已经帮助超过40,000人获得了作为开发者的工作。开始吧
