父子组件通信

组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

父组件向子组件传递数据

<div id="app">
    <child-component msg="你好"></child-component>    // 渲染子组件，并传递 msg
</div>

var app = new Vue({
  el: '#app',
  data: {},
  components: {    // 定义子组件
    'child-component': {
      props: ['msg'],  // 子组件使用 props 接收父组件传递的 msg
      template: `<h1>{{ msg }}</h1>`  // 4. 在 template 中使用 msg
    }
  }
})

• 子组件使用 props 接收父组件传过来的数据；
• props 的值可以是数组，也可以是对象
• props 中定义的属性， 子组件可以直接使用。

使用 v-bind 绑定数据

<div id="app">
    <input type="text" v-model="text">  // input 中使用 v-model 动态绑定了父组件中的 text
    <child-component :ada="text"></child-component>  // 在子组件上绑定 dong 属性，值为父组件中的 text
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '你好'
  },
  components: {
    'child-component': {
      props: ['ada'],  // 接收 dong 属性
      template: `<h2>{{ada }}</h2>`  // 使用 dong 属性
    }
  }
})

子组件中的内容，是父组件通过使用 v-bind 传递过来的，传过来的是父组件中的 text。而父组件中的 input 又使用了 v-model 绑定了 text，所以，当改变 input 中的内容时，父组件中的 text 就会改变，text 又传递到子组件，子组件中的内容也会跟着改变。
使用 v-bind 和 不使用 v-bind 的区别:不使用 v-bind，传的是字符串；使用 v-bind，传的是什么就是什么。

子组件向父组件传递数据

    <div id="app">
        现在的余额是{{total}}
        <son-component @change="handleTotal"></son-component> 
     <!-- @change 自定义事件 -->
    </div>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                total: 1000
            },
            methods: {
                handleTotal: function (value) {
                    //此处的形参 value 就是传递过来的数据
                    this.total = value;
                }
            }
        }),

        components: {
            'son-component': {
                template: `
                <div>
                  <button @click="handleincrease">+100</button>   
                  <button @click="handlereduce">-100</button>   
                </div> `,
                data: function () {
                    return {
                        count: 100
                    }
                },

                methods: {
                    handleincrease: function () {
                        this.count = this.count + 100
                        this.$emit('change', this.count)
                        //第一个参数是事件名，后边的参数是要传递的数据
                    },
                    handlereduce: function () {
                        this.count = this.count - 100
                        this.$emit('change', this.count)
                    }
                }
            }
        }
</script>

• $emit()实现子组件向父组件通信。

• $emit()绑定自定义事件event，当这个语句被执行到的时候，就将参数传递给父组件，父组件通过@event监听并接收参数。