单向数据流

• Vue 提倡单向数据流，即父组件通过 props 传递数据到子组件，子数据无权修改父组件的数据。目的时为了防止应用数据的流向边得混乱，难以理解。
• 只能通过 $emit 派发一个自定义事件给父组件，由父组件来修改数据

父子组件间通信

• 父组件通过 :data="data" 传递数据
• 父组件通过 @fun="fun" 传递方法

// 父组件 $emitFa.vue
<template>
  <div>
    <h1>父组件数据：{{msg}}</h1>
    <emit-ch :sendData="msg" @updateInfo="updateInfo"></emit-ch>
  </div>
</template>
<script>
import emitCh from './$emitCh'
export default {
  components: { emitCh },
  data () {
    return {
      msg: '北京'
    }
  },
  methods: {
    updateInfo (data) {
       this.msg = data.city
    }
  }
}
</script>

• 子组件通过 props 接收父组件传递的值
• 子组件通过 $emit 调用父组件的方法并传递数据

// 子组件 $emitCh.vue
<template>
 <div>
    <h3>父组件传给子组件的数据：{{sendData}}</h3>
    <br/>
    <button @click='select()'>调用父组件的 updateInfo 方法</button>
  </div>

</template>

<script>
export default {
  props: ['sendData'],   // 接收父组件的数据
  data () {
    return {
    }
  },
  methods: {
    select () {
      let data = {
        city: '上海'
      }
      this.$emit('updateInfo', data)  // 触发父组件的 updateInfo方法
    }
  }
}
</script>