vue2.0 父传子，子传父----父子间通信

父组件向子组件传值

1.     子组件在props中创建一个属性，用于接收父组件传过来的值；
2.     父组件 引入子组件-->注册子组件-->引用子组件；
3.     在子组件标签中添加子组件props中创建的属性；
4.     将所要传递的值赋值给该属性。

props：

1. prop类型：通常你希望每个prop都有指定的数据类型，你可以以对象的形式列出prop，对象的属性的名称和值分别对应了prop的值和类型。
2. 单向数据流：所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。
3. 两种常见的视图改变prop的值：

 

• 这个prop用来传递一个初始值。子组件希望将其作为一个本地的prop数据来使用。在这种情况下，最好定义一个本地的data属性并将这个prop作为其初始值

            props: ['initialCounter'],

            data: function () {

                return {

                    counter: this.initialCounter

                }

            }

 

• prop以原始的值传入其需要转换，此时最好使用这个 prop 的值来定义一个计算属性

            props: ['size'],

            computed: {

              normalizedSize: function () {

                return this.size.trim().toLowerCase()

              }

        }

    
注意：在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。   

子组件向父组件传值

1.     子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件
2.     将所需要传递的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.     父组件 引入子组件-->注册子组件-->引用子组件
4.     在子组件标签上绑定对自定事件的监听

自定义事件

1.     父组件通过$on监听事件，事件处理函数的参数则为接收的数据
2.     子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据 
3.     sync修饰符：对一个 prop 进行双向绑定

• 父组件属性的 v-on 侦听器

            <comp :foo.sync="bar"></comp>

• 会被扩展为：

            <comp :foo="bar" @update:foo="val => bar = val"></comp>

• 当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

            this.$emit('update:foo', newValue)

总结：在通信中，无论是子传父或父传子都是有中间介质。子传父的介质是自定义事件，父传子的介质是props中的属性。