个人理解vue2 中的props其实是组件实例的是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中（摘自官网）。
也就是props是子组件访问父组件数据的唯一接口，也可以说是父组件向子组件传递某些元素属性，子组件用‘props’接收。
再理解就是：
一个组件可以直接在模板里面渲染data里面的数据（双大括号）。
子组件不能直接在模板里面渲染父元素的数据。
如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量（比如a），这个变量就可以引用父元素的数据。然后在模板里渲染这个变量（前面的a），这时候渲染出来的就是父元素里面的数据。
个人感觉为什么子组件引用父组件元素的时候，不像APP组件（父组件中）那样通过import与components那样操作，假如多个组件中元素含有相同元素属性名称呢，唯一的解释点就是父组件在渲染子组件模板时，通过template指定渲染某一子组件
```js``
`<template>
<div>
<Student name="李四" sex="女" :age="18"/>
</div>
</template>
<script>
import Student from './components/Student'
export default {
name:'App',
components:{Student}
}
</script>
而在子组件中，data中根本没有定义对应的元素属性，只有通过props引用父组件的元素，并在模板中渲染展示
````<template>
<div>
<h1>{{msg}}</h1>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>学生年龄：{{myAge+1}}</h2>
<button @click="updateAge">尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
console.log(this)
return {
msg:'你好啊',
myAge:this.age
}
},
methods: {
updateAge(){
this.myAge++
}
},
//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
props:{
name:{
type:String, //name的类型是字符串
required:true, //name是必要的
},
age:{
type:Number,
default:99 //默认值
},
sex:{
type:String,
required:true
}
}
}
</script>`
所以在父组件中模板渲染时直接赋值元素属性即可。 对于一些props接收到的数据修改与不可修改的问题就不多赘叙了
