單向數據流（One-Way Data Flow）

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：
父級 prop 的更新會向下流動到子組件中，但是反過來則不行。
這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。

額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。
這意味著你不應該在一個子組件內部改變 prop。
如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。

這是一個會造成錯誤的範例

當你改動畫面中input 的值的時候，Vue 會在瀏覽器的控制台發出警告。

<div id="app">
  <h2>單向數據流</h2>
  <child :child-data="papadata"></child>
</div>

Vue.component('child', {
  props: ['childData'],
  template: '<div><input type="text" class="form-control" v-model="childData"></div>',
})

var app = new Vue({
  el: '#app',
  data: {    
    papadata: '我是papa的資料',    
  },
});
</script>

控制台的警告

解決方法

使用function return並新建一個變數，來接父級傳來的props，因此可避免與父級的資料綁定。

Vue.component('child', {
  props: ['childData'],
  template: '<div><input type="text" class="form-control" v-model="newData"></div>',
  data(){
    return {
      newData: this.childData
    }
  }
})