这些Vue中道具的知识点你可以复习一下！

如果您一直在阅读“道具”，您可能已经注意到我们也可能一直在使用它们（即使没有意识到），但也许您并不完全确定它们是什么。或者如何正确使用它们，并充分利用它们。阅读完本指南后，您将了解成为有效的Vue开发人员需要了解的有关props的所有信息。在本指南中，我们将介绍有关道具的最重要的事情：什么是道具？props的两大特点如何将props传递给其他组件添加prop类型添加需要的props设置默认值什么是props？Props是我们在不同组件之间传递变量和其他信息的方式。这类似于在JS中我们如何将变量作为参数传递给函数：在这里，我们将变量myMessage作为参数消息传递给函数。在函数内部，我们可以将值作为消息访问。道具的工作方式与此非常相似。我们将道具传递给另一个组件，然后它可以使用该值。但首先你需要知道一些规则。props的两个主要特点在处理props时有两点需要特别注意：props在组件树中向下传递给后代（而不是向上传递）props是只读的，不能修改Vue使用单向数据流，这意味着数据只能从父组件流向子组件，数据不能从子对象传递到父对象。因为父组件“拥有”它传递的值，所以子组件不能修改它。如果只允许更改一个组件，则更容易追踪错误，因为我们确切地知道去哪里找。确保在开发中不违反这两条规则，开发就会变得容易，也更容易找到问题的原因。让我们看看如何将props从一个组件传递到另一个组件。将props传递给其他组件如果要将值从组件传递给子组件，这与添加HTML属性完全相同。Camera组件将使用name和img道具来呈现自己的页面。内容大致如下：这里我们将名称渲染到h2标签中，并使用img设置img标签上的src属性。但是如果我们将这些信息存储在某个地方的变量中呢？为此，我们需要使用稍微不同的语法，因为我们想使用JS表达式而不是传递字符串。v-bind:name="cameraName"行告诉Vue将JS表达式cameraName绑定到propname。JS表达式是JS中的任意一段代码。可以是我们这里的变量名，或者更复杂的东西。您还可以使用逻辑或img设置图像路径：v-bind可以简写：添加道具在这段代码真正起作用之前，我们需要让Camera组件真正地监听props。组件默认忽略它们。为此，我们必须在组件定义中添加一个props部分：exportdefault{name:'Camera',props:['name','img'],}一般不建议这样写，你应该指定道具对象的类型：exportdefault{name:'Camera',props:{name:{type:String,},img:{type:String,}}}通过从数组到对象，我们可以指定更多的道具细节，比如类型。为什么我们要给props添加类型？在Vue中，props可以有很多不同的类型：StringNumberBoolean(trueorfalse)ArrayObject通过添加类型，我们可以设置我们期望接收的数据类型。如果我们将相机的props中的name设置为true，它将不起作用，因此Vue会警告我们使用错误。然后给我们的Camera组件添加一个rating，rating类型是Number:exportdefault{name:'Camera',props:{name:{type:String,},img:{type:String,},rating:{type:Number,},}}然后在模板中显示评分：在外层调用：必需的props并非所有的props都是一样的，其中一些是组件正常工作所必需的。对于我们的Camera组件，我们肯定需要一个名称，但img和rating不是必需的。exportdefault{name:'Camera',props:{name:{type:String,required:true,},img:{type:String,},rating:{type:Number,},}}exportdefault{name:'Camera',props:{name:{type:String,required:true,},img:{type:String,},rating:{type:Number,},}}通过设置required:true,我们的名字是必填的需要传入，反之required对应的props为false可以传也可以不传。默认值对于不是每次都传入的props，我们可以为其添加默认值。exportdefault{name:'Camera',props:{name:{type:String,required:true,},img:{type:String,default:'../no-camerage-found.jpg',},rating:{type:Number,},}}之前我们通过逻辑or为img添加了一个默认值，这次我们使用default属性来设置img的默认值。我们还需要为我们的评级设置一个默认值。如果没有设置或者从外部传入，我们访问的时候会得到undefined，这可能会给我们带来一些问题在模板外使用props虽然能够在模板中使用props固然很棒，但真正的威力来自from在其他JS的方法、计算属性和组件中使用它们。在我们的模板中，我们看到我们只需要道具名称，例如：{{rating}}。然而，在Vue组件的其他任何地方，我们都需要使用this.rating访问我们的道具。让我们重构应用程序以使用标准的图像URL结构。这样我们就不用每次都传给Camera组件了，直接从名字上搞定就可以了。我们将使用以下结构：./images/cameras/${cameraName}.jpg因此，如果相机是SonyA6400，则URL将变为./images/cameras/Sony%20A6400.jpg。%20来自对空格字符的编码，因此我们可以在URL中使用它。首先，我们将删除不再是imgpropsexportdefault{name:'Camera',props:{name:{type:String,required:true,},rating:{type:Number,default:0,},}}需要然后我们将添加一个计算属性，该属性将为我们生成图像URL：并非所有字符都可以在URL中使用，因此encodeURIComponent将为我们转换它们。因为我们可以像访问常规props一样访问这个computedprop，所以我们根本不需要更改模板，模板可以和以前一样：这样，您的Componentprops可以在以下地方使用：在watch中计算的生命周期钩子方法中以及组件定义中的任何其他地方！综上所述，就是关于道具的知识点，但是，要学的东西总是很多的。Vue也是一个永无止境的学习过程。继续前进！