组件通信概述
组件之间虽然有父子关系，但还是互相独立的。互相之间并不能直接操作对方的数据。这是出于安全性考虑的。组件之间是有通信需求的，vue为我们提供了两者方式来实现父子组件之间的通信。分别是props(父传子)和emit(子传父)。 后面会详细讲解。
组件通信是非常重要的一个内容，也是相对比较难的一个内容，所以需要多练习，熟练掌握。
笔者打算写两篇文章来分别介绍props(父传子)和emit(子传父)。这篇文章先介绍props(父传子)的使用。
对于官方文档的吐槽（可直接跳过看下一小节）
题外话，可直接跳过看下一小节。
如果你看过官方文档，props是单独作为一个节点说明的，然后你发现根本看不懂，不知道他在说什么东西。而且一上来就讲props的驼峰命名。这并不是你的问题，而是文档的问题。
在文档的最开始，有一段提示，告诉你要先阅读组件基础。确实在组件基础这小节，居然给出了props的定义。
这是我最不能理解的文档结构，把定义放在别的地方，然后把不重要的东西又写在单独节点的开头。
我给的建议是先阅读 组件基础里面 关于props定义的部分，然后再阅读props这节。
什么是props
组件通信中要实现父传子的功能是通过props实现的。那么什么是props呢？
Prop 是你可以在组件上注册的一些自定义 attribute。这是官方给出的定义。简单点说，就是父组件给子组件传值的时候，把值直接传给子组件自己定义的属性。这些属性（property）是在子组件里面定义的，没错，prop就是property的缩写。相当于给父组件带名字的盒子，叫父组件往里面放数据就行。
还是举个例子说明更清楚。
我们定义一个子组件的模板，因为子组件是提供给父组件（通常就是顶层组件）用的。所以子组件定义的变量不能写死，而是需要父组件传入。
<!--1.定义子组件模板-->
<template id="studentInfo">
<div>
<p>{
{
msg}}</p>
<p>姓名：{
{
name}}</p>
<p>年龄：{
{
age}}</p>
<p>性别：{
{
gender}}</p>
</div>
</template>
我们希望父组件在使用子组件的时候是类似这种效果的。
如果你运行代码肯定报错，因为我们根本就没有定义name,age和gender属性。
这里就是最关键的地方。没有怎么办？当然是在子组件定义啊。
<div id="box">
<student name="张三" age="age" gender="男"></student>
<hr>
<student name="李四" age="18" gender="女"></student>
</div>
我们可以通过在子组件里面写props来定义子组件的属性。
这是关键点。
props的本质就是给组件定义属性的名字。
props的本质就是给组件定义属性的名字。
props的本质就是给组件定义属性的名字。
给props写上值，就相当于子组件的模板标签可以使用下面的显示来使用了。这时候就不会报错了，因为name,age,gender已经定义好了。
<student name="xxx" age="xxx" gender="xxx"></student>
这里还定义了data,里面返回了msg的值。也就是msg是用的子组件自己的值，没有对父组件暴露。
<!--2.注册子组件-->
Vue.component("student",{
template:`#studentInfo`,
data(){
return{
msg: "我是一个好学生"
}
},
//3.定义属性
props:["name","age","gender"]
})
运行代码神奇的事情发生了，原本不存在的name,age,gender属性居然可以用了。
<student name="李四" age="18" gender="女"></student>
props的多种定义方式
第一种方式：
这是最简单的方式。
props:["name","age","gender"]
第二种方式：
相对规范一点。
props:{
name:String,
age:Number,
gender:String
}
第三种方式：
最完整的用法。
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
required: false,
default:99
},
gender: {
type:String
}
}
props和数据绑定
前面其实props的基本概念已经讲完了。接下来看使用中会遇到的问题。
现在我希望age传过来的值自动加1。可能会写下面的代码，但这样是错误的。结果如下，会变成两个字符串的相加。
<!--1.定义子组件模板-->
<template id="studentInfo">
<div>
//some code
<p>年龄：{
{
age+1}}</p>
//some code
</div>
</template>
其实非常的简单，我们只需要给age设为数据绑定就行了。这里涉及到数据绑定的一个小技巧。数据绑定后，" "里面的内容变成了表达式而不是字符串，这样age内容在传输的时候就变成的Number类型。
<student name="张三" :age="18" gender="男"></student>
一般情况下，传值的时候，我们是不会直接写的，而是通过data来传值。我们定义两个值。
var app = new Vue({
el: "#box",
data: {
message:"你叫什么名字",
age:25
},
methods: {
}
})
将这两个值通过数据绑定绑定上。
<student :msg="message" name="张三" :age="18" gender="男"></student>
我们没有定义msg属性，所以一定会报错，这时候还需要在props里面定义msg属性。
props:["name","age","gender","msg"]
这样，我们的msg也传过来了。
如果你打开控制台，会发现报错了。虽然界面还是正常的。会告诉你下面的错误。因为现在是父组件传值，直接把下面的代码注释，写到props里面，并且赋默认值就行了。
data可以注释了。
data(){
return{
// msg: "我是一个好学生"
}
}
给msg设默认值。
msg:{
type:String,
default: "我是一个好学生"
}
修改父组件传过来的值
现在添加两个按钮，对年龄++和–
<template id="studentInfo">
<div>
<p>{
{
msg}}</p>
<p>姓名：{
{
name}}</p>
<p>年龄：{
{
age}}</p>
<p>性别：{
{
gender}}</p>
<button @click="age++">+</button>
<button @click="age--">-</button>
</div>
</template>
功能是可以用的，但有下面的警告。大概意思就是避免修改父组件传过来的值，因为可能父子组件同时修改，会造成一些问题。
但我就需要实现这样的功能怎么办？可以考虑用一个中间变量缓冲一下。
data(){
return{
myAge:this.age
}
}
然后对我们的中间变量进行操作就可以了。
<p>年龄：{
{
myAge}}</p>
<button @click="myAge++">+</button>
<button @click="myAge--">-</button>
总结
props本身的含义就是属性。就是给子组件定义属性用的。子组件有了属性，父组件就可以直接给这些属性赋值。