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

https://michaelnthiessen.com/...byMichaelThiessen没有意识到），但也许你不完全确定它们是什么。或者如何正确使用它们，并充分利用它们。阅读完本指南后，您将了解成为有效的Vue开发人员需要了解的有关props的所有信息。在本指南中，我们将介绍有关道具的最重要的事情：什么是道具？props的两大特点如何将props传递给其他组件添加prop类型添加需要的props设置默认值什么是props？Props是我们在不同组件之间传递变量和其他信息的方式。这类似于在JS中我们如何将变量作为参数传递给函数：constmyMessage="I'mastring";functionaddExclamation(message){returnmessage+'!';}console.log(addExclamation(myMessage));//我是一个字符串！在这里，我们将变量myMessage作为参数消息传递给函数。在函数内部，我们可以将值作为消息访问。道具的工作方式与此非常相似。我们将道具传递给另一个组件，然后它可以使用该值。但首先你需要知道一些规则。props的两个主要特点在处理props时，有两点需要特别注意：props是在组件树中向下传递给后代的（不是向上传递的）props是只读的，不能修改Vue使用单向数据流，这意味着数据只能从父组件流向子组件，数据不能从子对象传递到父对象。因为父组件“拥有”它传递的值，所以子组件不能修改它。如果只允许更改一个组件，则更容易追踪错误，因为我们确切地知道去哪里找。确保在开发中不违反这两条规则，开发就会变得容易，也更容易找到问题的原因。让我们看看如何将props从一个组件传递到另一个组件。将props传递给其他组件如果要将值从组件传递给子组件，这与添加HTML属性完全相同。Camera组件将使用name和img道具来呈现自己的页面。内容大致如下：这里我们将名称渲染到h2标签中，并使用img设置img标签上的src属性。但是如果我们将这些信息存储在某个地方的变量中呢？为此，我们需要使用稍微不同的语法，因为我们想使用JS表达式而不是传递字符串。v-bind:name="cameraName"这行告诉Vue将JS表达式cameraName绑定到prop姓名。JS表达式是JS中的任意一段代码。可以是我们这里的变量名，或者更复杂的东西。您还可以使用逻辑或img设置图像路径：v-bind可以简写：添加props在这段代码实际运行之前，我们需要让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,},}}然后在模板中显示评分：在外层调用：必需的道具并非所有的道具都是平等的，其中一些道具是组件正常工作所必需的。对于我们的Camera组件，我们肯定需要一个名称，但img和rating不是必需的。exportdefault{name:'Camera',props:{name:{type:String,required:true,},img:{type:String,},rating:{type:Number,},}}通过设置required:true要求必须传入我们的名字，反之required对应的props为false可以传也可以不传。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。我和阿里云服务器合作，优惠价格比较便宜：89/年，223/3年，比学生便宜9.9/月，买了建了一个项目，熟悉技术栈比较香（老用户可以买用他们的家庭账户，我用我妈妈的）推荐购买三年的便宜货，点击本文查看。默认值对于不是每次都传入的props，我们可以为其添加默认值。exportdefault{name:'Camera',props:{name:{type:String,required:true,},img:{type:String,default:'../no-camerage-found.jpg',},评级:{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,},}是nolongerneeded}然后我们将添加一个计算属性来为我们生成图像URL：exportdefault{name:'Camera',props:{name:{type:String,required:true,},rating:{type:Number，默认值：0,},},computed:{img(){return`./images/cameras/${encodeURIComponent(this.name)}.jpg`;}}}并不是所有的字符都可以在URL中使用，所以encodeURIComponent会帮我们转换这些字符。因为我们可以像访问常规道具一样访问这个计算道具，所以我们根本不需要更改模板，模板可以和以前一样：