Vue中 props 这些知识点

如果你一直在阅读有关"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时，有两件事需要特别注意：

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

props 是只读的，不能修改

Vue 使用单向数据流，这意味着数据只能从父组件流向子组件，不能将数据从子对象传递到父对象。因为父组件“拥有”它传递的值，所以子组件不能修改它。如果只允许一个组件更改它，那么跟踪bug就更容易了，因为我们确切地知道应该从哪里查找。
在开发确保没有违反这两条规则，开发就会变得更容易些，出问题也比较好找原因。接着来看看如何将 props 从一个组件传递到另一个组件。
将 props 传递给其他组件
如果希望将值从组件传递到子组件，这与添加HTML属性完全相同。

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

{{ name }}

标签：知识点,myMessage,Vue,传递,props,组件,message
来源： https://www.cnblogs.com/T888888/p/12605241.html