Vue中 props 这些知识点，能够在来复习一下！

做者：Michael Thiessen

译者：前端小智

来源：Michael

若是你一直在阅读有关"props"内容，你会发现咱们可能也一直在使用它们（即便没有意识到），但也许你并不彻底肯定它们是什么。或者如何正确使用它们，并充分利用它们。

当你读完这篇指南时，你就会知道成为一名高效的Vue开发者所须要知道的关于props的一切。

在本指南中，咱们将介绍关于 props 的最重要的事情:

• 什么是 props ?
• props 的两个主要特色
• 如何将 props 传递给其余组件
• 添加 props 类型
• 添加必填的 props
• 设置默认值

什么是 props ?

props 是咱们在不一样组件之间传递变量和其余信息的方式。这相似于在 JS 中，咱们能够将变量做为参数传递给函数:

const myMessage = "I'm a string";

function addExclamation(message) {
  return message + '!';
}

console.log(addExclamation(myMessage)); // I'm a string!
复制代码

这里，咱们将变量myMessage做为参数message传递给函数。在函数内部，咱们能够将该值做为message访问。

props的工做原理与此很是类似。咱们将props传递给另外一个组件，而后该组件可使用该值。可是首先须要了解一些规则。

props 的两个主要特色

在处理props时，有两件事须要特别注意：

1. props 经过组件树传递给后代(而不是向上传递)

2. props 是只读的，不能修改

Vue 使用单向数据流，这意味着数据只能从父组件流向子组件，不能将数据从子对象传递到父对象。由于父组件“拥有”它传递的值，因此子组件不能修改它。若是只容许一个组件更改它，那么跟踪bug就更容易了，由于咱们确切地知道应该从哪里查找。

在开发确保没有违反这两条规则，开发就会变得更容易些，出问题也比较好找缘由。接着来看看如何将 props 从一个组件传递到另外一个组件。

将 props 传递给其余组件

若是但愿将值从组件传递到子组件，这与添加HTML属性彻底相同。

<template>
  <Camera
	name="Sony A7RIV"
	img="../sony-a7riv.jpg"
  />
</template>
复制代码

Camera组件将使用name和img props 来渲染自身页面。内容大概以下：

<template>
  <div class="camera">
	<h2 class="camera__name">{{ name }}</h2>
	<img class="camera__image" :src="img" />
  </div>
</template>
复制代码

在这里，咱们将name渲染到h2标记中，并使用img设置img标记上的src属性。

可是，若是咱们将此信息存储在某个位置的变量中怎么办？

为此，咱们须要使用稍微不一样的语法，由于咱们但愿使用 JS 表达式而不是传递字符串。

<template>
  <Camera
	v-bind:name="cameraName"
	v-bind:img="cameraImage"
  />
</template>
复制代码

v-bind:name="cameraName"行告诉Vue将 JS 表达式cameraName绑定到 prop name。JS 表达式是 JS 的任何代码段。 多是像咱们在此处这样的变量名，或更复杂的名称。

还可使用逻辑或 img 设置图像路径：

<template>
  <Camera
	v-bind:name="cameraName"
	v-bind:img="cameraImage || '../no-camera-found.jpg'"
  />
</template>
复制代码

v-bind 能够用简写形式 :

<template>
  <Camera
	:name="cameraName"
	:img="cameraImage || '../no-camera-found.jpg'"
  />
</template>
复制代码

添加 props

在此代码实际起做用以前，咱们须要获取Camera组件才能实际收听props。 默认状况下，组件会忽略它们。为此，咱们必须在组件定义中添加一个props部分：

export default {
  name: 'Camera',
  props: ['name', 'img'],
}
复制代码

一般不建议这么写，应该为props对象指定类型：

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
  	},
  	img: {
      type: String,
  	}
  }
}
复制代码

经过从数组到对象，咱们能够指定更多的 props 细节，好比类型。咱们为何要向 props 添加类型？

在Vue中，props 能够有不少不一样的类型：

• String
• Number
• Boolean (true 或者 false)
• Array
• Object

经过添加类型，咱们能够设置咱们指望收到的数据类型。若是咱们将camera的props中的name设置为true，它将没法正常工做，所以Vue会警告咱们使用错误。

接着添加一个rating到咱们的Camera组件中，该 rating 类型为 Number:

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
  	},
  	img: {
      type: String,
  	},
  	rating: {
      type: Number,
  	},
  }
}
复制代码

而后在 template 中显示 rating:

<template>
  <div class="camera">
	<h2 class="camera__name">{{ name }}</h2>
	<span class="camera__rating">{{ rating }}</span>
	<img class="camera__image" src="img" />
  </div>
</template>
复制代码

在外层调用：

<template>
  <Camera
	name="Sony A7RIV"
	img="../sony-a7riv.jpg"
	:rating="9"
  />
</template>
复制代码

必填的 props

不是全部的 props 都是同样的，为了使组件正常工做，其中一些要求必填的。

对于咱们的Camera组件，咱们确定须要一个name，但 img 和 rating 不是必需的。

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	img: {
      type: String,
  	},
  	rating: {
      type: Number,
  	},
  }
}
复制代码

经过设置 required: true 要求咱们的 name 是必须要传入的，相反，required 为 false 对应的props可传可不传。

默认值

对于不是每次都传入的 props，咱们能够为其，添加默认值。

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	img: {
      type: String,
      default: '../no-camerage-found.jpg',
  	},
  	rating: {
      type: Number,
  	},
  }
}
复制代码

前面咱们经过逻辑或为img添加默认值，此次咱们使用 default 属性为img设置默认值。

一样也须要为咱们的rating设置默认值。若是没有设置也没有从外部传入，咱们访问的时候就会获得undefined，这可能会给咱们带来一些问题

在模板外使用 props

虽然可以在template中使用props很棒，可是真正强大的功能来自于在方法、计算属性和组件中在使用其余 JS 中使用它们。

在咱们的template中，咱们看到咱们只须要props名称，例如：{{rating}}。 可是，在Vue组件的其余任何地方，咱们都须要使用this.rating访问咱们的props。

让咱们重构应用程序，以便为图像使用标准的URL结构。 这样，咱们没必要每次都将其传递给Camera组件，而只需从名称中找出便可。

咱们将使用如下结构：./images/cameras/${cameraName}.jpg

所以，若是 camera 是Sony A6400，则URL将变为./images/cameras/Sony%20A6400.jpg。 ％20来自对空格字符的编码，所以咱们能够在URL中使用它。

首先，咱们将移除再也不须要的img props

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	rating: {
      type: Number,
      default: 0,
  	},
  }
}
复制代码

而后，咱们将添加一个计算属性，该属性将为咱们生成图像URL：

export default {
  name: 'Camera',
  props: {
  	name: {
      type: String,
      required: true,
  	},
  	rating: {
      type: Number,
      default: 0,
  	},
  },
  computed: {
    img() {
      return `./images/cameras/${encodeURIComponent(this.name)}.jpg`;
    }
  }
}
复制代码

并不是全部字符均可以在URL中使用，所以encodeURIComponent会为咱们转换这些字符。

由于咱们可使用与常规props相同的方式来访问此计算 props，因此咱们根本不须要更改模板，而且模板能够像之前同样保持不变：

<template>
  <div class="camera">
    <h2 class="camera__name">{{ name }}</h2>
    <span class="camera__rating">{{ rating }}</span>
    <img class="camera__image" src="img" />
  </div>
</template>
复制代码

样，您能够在如下位置使用组件的props：

• watch 中
• 生命周期 hook
• method
• computed 中

以及组件定义中的其余任何地方！

总结

以上，这些是关于 props 的知识点，可是，总会有更多东西要学习。 Vue 也是一个永无止境的学习过程。keep going !

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：reactgo.com/vuejs-props…

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub github.com/qq449245884… 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。