一、子组件需要做的
子组件要显式地用 props 选项声明它期待获得的数据
props:[data]
然后在组件内使用data
二、父组件需要做的
这个时候需要区分静态传值和静态传值
静态
在父组件使用子组件标签时
<tem data="haha"></tem>
这个时候静态传值就完成了
动态
在父组件使用子组件标签时
<tem v-bind: data="myData"></tem>
data(){ return{ myData:"haha" }}
注：在传递数字的时候尽量使用静态传值
三、props验证
有时候我们需要对传递过来的值进行验证，以确定传递的值符合我们的要求
要指定验证规格，需要用对象的形式，而不能用字符串数组 这时的props需要写成对象
props:{data:Array}
注： 当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用；
四、单向数据流
props传值是单向的：父组件的数据可以传给子组件，而子组件的数据不能传给父组件，这是为了防止子组件无意修改了父组件的状态，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告
五、修改props数据
通常改变props的数据有两个原因
1、prop 作为初始值传入后，子组件想把它当作局部数据来用
2、prop 作为初始值传入，由子组件处理成其它数据输出
注：JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态
因此 接下来：
1、定义一个局部变量，并用 prop 的值初始化它
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
但是，定义的局部变量counter只能接受initialCounter的初始值，当父组件要传递的值发生变化时，counter无法接收到最新值
2、定义一个计算属性，处理 prop 的值并返回
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
但是，由于是计算属性，则只能显示值，而不能设置值
3、更好的方式，使用变量储存prop的初始值，并使用watch来观察prop的值的变化。发生变化时，更新变量的值
props:['childMsg'], data(){ return{ temp:this.childMsg } }, watch:{ childMsg(){ this.temp =this.childMsg } }
