vue2.0父子组件通信

效果图：
传值前：

传值后：

1.父组件向子组件传值的两种情况
a.给子组件传静态的值：

<blog-post title="My journey with Vue"></blog-post>

比较简单，不再赘述
b.动态的值，v-bind绑定，简写 使用 ：
动态传值可以传数字，布尔型，数组，对象等，本文以传对象的两种方式为例，顺便包含传字符串，布尔值两种情况。
第一种：
父组件代码：

<template>
    <div>
      <p>父组件</p>
      id:<input v-model="user.id" /><br>
      name:<input v-model="user.name" />
      <!--子组件引入-->
      <sonComponent :id="user.id" :name="user.name" :onlineStatus="user.onlineStatus"></sonComponent>
      <!--<sonComponent :user="user"></sonComponent>-->
    </div>
</template>

<script>
  import sonComponent from './sonComponent.vue'
    export default {
        name: "fatherComponent",
        components:{
          sonComponent
        },
        data(){
          return{
            user:{
              id:'',
              name:'',
              onlineStatus:true,
            }
          }
        }
    }
</script>

<style scoped>

</style>

注意：父组件中要引入子组件并引用，参见图片：

子组件代码：

<template>
  <div>
    <p>子组件</p>
    id:<span>{{id}}</span><br>
    name:<span>{{name}}</span>

  </div>
</template>

<script>
    export default {
        name: "sonComponent",
        props:{
          id:String,
          name:String,
          onlineStatus:Boolean
        }
    }

</script>

<style scoped>

</style>

注意：
组件实例的作用域是孤立的；子组件要显式的用props选项声明它预期的数据。参见图片：

第二种情况：
父组件中注释上一行，变成以下情况

子组件中：

<template>
  <div>
    <p>子组件</p>
    user.id:<span>{{user.id}}</span><br>
    user.name:<span>{{user.name}}</span><br>

  </div>
</template>

<script>
    export default {
        name: "sonComponent",
        props:{
          user:Object
        }
    }

</script>

<style scoped>

</style>

最终效果：

谨记：单向数据流，父级 prop 的更新会向下流动到子组件中，但是反过来则不行

2.子组件向父组件传值

$emit（event,[...args]）	

子组件通过$emit触发父组件上绑定的自定义事件，将自身数据作为参数传入事件函数，在父组件的事件函数中将参数赋值给父组件的对应变量

子组件代码：

<template>
  <div>
    <p>子组件</p>
    父组件传来的值：<br>
    user.id:<span>{{user.id}}</span><br>
    user.name:<span>{{user.name}}</span><br>
    <input v-model="message"><button @click="send">Send to Father</button>
  </div>
</template>

<script>
    export default {
        name: "sonComponent",
        props:{
          user:Object
        },
      data(){
          return{
            message:''
          }
      },
      methods:{
          send:function(){
            this.$emit('sonSendMessage',this.message)
          }
      }
    }
</script>

<style scoped>

</style>

父组件：

父组件代码：

<template>
    <div>
      <p>父组件</p>
      id:<input v-model="user.id" /><br>
      name:<input v-model="user.name" /><br>
      子组件传来的值：<span>{{message}}</span>
      <!--子组件引入-->
      <!--<sonComponent :id="user.id" :name="user.name" :onlineStatus="user.onlineStatus"></sonComponent>-->
      <sonComponent :user="user" @sonSendMessage="getMessage"></sonComponent>
    </div>
</template>
<script>
  import sonComponent from './sonComponent.vue'
    export default {
        name: "fatherComponent",
        components:{
          sonComponent
        },
        data(){
          return{
            user:{
              id:'',
              name:'',
              onlineStatus:true,
            },
            message:'',
          }
        },
      methods:{
        getMessage:function (payLoad) {
          this.message = payLoad
        }
      }
    }
</script>

<style scoped>

</style>

总结：

子组件向父组件传值----中间介质----自定义事件
父组件向子组件传值—中间介质-----props中的属性