父子元件通訊

父元件

<div id="prop-example-2">
  <child :string="string" :obj="obj" :name.sync="name" @changString="changString"></child>
</div>

注意在 JavaScript 中物件和陣列是引用型別，指向同一個記憶體空間，如果 prop 是一個物件或陣列，在子元件內部改變它會影響父元件的狀態。
資料分為引用型別和基本型別，基本型別的資料只有在父元件中才能改變，引用型別的可以在任何地方改變。在vue資料傳遞中，Object和Array為引用型別，String，Number，Boolean為基本型別，想理解的更清楚，建議去看下我的這篇部落格

js基本型別和引用型別

new Vue({
  el: '#prop-example-2',
  data: {
     string: '基本型別資料--只能在父元件中修改',
     obj: {tips: '父子元件都可以修改，且不需要顯示提交，各個元件都會響應修改'},
     name: '加sync修飾符，可以從子元件顯示提交修改'
  },
  methods: {
     // 子元件提交事件告訴要進行更改
    changString (newString) {
        this.string = newString
    }
  }
})

子元件

Vue.component('example'
 
, {
  // 接收資料
  props: {
    string: String,
    arr: Array,
    name: String
  },
  methods: {
      changeString () {
        // 會提交一個changString事件，這時需要在父元件上監聽此事件
        this.emit('changString', 'string的最終值')
      },
      changeName () {
        //  顯示的提交name，不需要再去父元件上監聽然後再去改變name的值，vue會幫我們做了這個過程
        this
 
.$emit('update:name', newName)
      },
      //  引用型別
      changeArr () {
        obj.tips = '不需要任何處理就直接改了'
      }
  }
})

上面是對已存在的值進行修改，如果在物件中要新增/刪除新的鍵值對，就應該進行全域性註冊

vm.$set( target, key, value )
vm.$delete( target, key )

對於陣列，在對其操作時，最好了解一下vue提供的變異方法（對陣列的一些方法進行了包裝，也就是對data裡的那些陣列的prototype上的一些方法重寫，注意，沒改變Array物件的方法），以便view對做出反應，變異方法有如下幾種

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

props驗證規則請移步官網props驗證