父传子 prop
prop使用场景：父组件需要向子组件传递消息的时候，子组件就可以定义prop属性，来接受父组件传递消息。
父组件
通过 :data="data1" 传递data1给子组件
<div>
<children v-if="data1" :data="data1" ></children>
</div>
export default{
data(){
return {
data1:""
}
},
mounted(){
this.data1=1
}
}
子组件
通过 props: ["data"] 的方式来接收父组件传递过来的数据
prop:['data']
methods:{
console.log(this.data)
}
Prop类型
1. 以字符串数组形式列出的 prop：
props: ['title', 'likes']
2. 以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：
props: {
title: String,
likes: Number
}
3. 以对象形式列出 prop，每一个传递过来的数据都用一个单独的对象来定义，并且可以添加一些其它参数：
props: {
title: {
type: String,
required: true，
default() {
return null
}
}
}
单向数据流
父级 prop 的更新会向下流动到子组件中，但是反过来则不行。 这里有两种常见的试图改变一个 prop 的情形： 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值
- prop 数据单项传递，父影响子，子不影响父
- 不能在组件中直接修改 prop 传递过来的值，Vue 会给出警告
props: ['test'],
data: function () {
return {
counter: this.test
}
}
接收到的数据需要转换
这个 prop 以一种原始的值传入且需要进行转换，最好使用这个 prop 的值来定义一个计算属性：
props: ['test'],
computed: {
changeTest: function () {
return this.test.trim().toLowerCase()
}
}
总结
- 父组件通过attr传递数据给子组件，子组件通过prop接收
- 子组件接收prop的定义有三种方式
- 子组件接收到的数据需要转换时，定义一个computed来转换接收到的数据
- 接收到的prop，可以直接this.test来使用，或者把接收到的 test 存入data中使用
- 单项数据流 -> 父级 prop 的更新会向下流动到子组件中，但是反过来则不行
