單向數(shù)據(jù)流

• Vue 提倡單向數(shù)據(jù)流，即父組件通過 props 傳遞數(shù)據(jù)到子組件，子數(shù)據(jù)無權(quán)修改父組件的數(shù)據(jù)。目的時為了防止應(yīng)用數(shù)據(jù)的流向邊得混亂，難以理解。
• 只能通過 $emit 派發(fā)一個自定義事件給父組件，由父組件來修改數(shù)據(jù)

父子組件間通信

• 父組件通過 :data="data" 傳遞數(shù)據(jù)
• 父組件通過 @fun="fun" 傳遞方法

// 父組件 $emitFa.vue
<template>
  <div>
    <h1>父組件數(shù)據(jù)：{{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 調(diào)用父組件的方法并傳遞數(shù)據(jù)

// 子組件 $emitCh.vue
<template>
 <div>
    <h3>父組件傳給子組件的數(shù)據(jù)：{{sendData}}</h3>
    <br/>
    <button @click='select()'>調(diào)用父組件的 updateInfo 方法</button>
  </div>

</template>

<script>
export default {
  props: ['sendData'],   // 接收父組件的數(shù)據(jù)
  data () {
    return {
    }
  },
  methods: {
    select () {
      let data = {
        city: '上海'
      }
      this.$emit('updateInfo', data)  // 觸發(fā)父組件的 updateInfo方法
    }
  }
}
</script>