vue.js學習筆記（三）--父子元件通信總結

部落格位址：https://fisher-zh.github.io

在使用Vue的過程中，如果需要進行父子元件間的通信，通過查閱官方文檔

我們可以了解到隻需要在子元件要顯式地用 props選項聲明它期待獲得的資料，同時在其使用過程中傳入相應的資料即可，例如：

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模闆内
  // 同樣也可以在 vm 執行個體中像“this.message”這樣使用
  template: '<span>{{ message }}</span>'
})
           

當然，這隻是一個簡單的例子，在實際的使用過程中，我們還可以在子元件中聲明傳入資料的類型和預設值，這些不展開講解，查閱官方文檔均可以找到滿意的答案。

在vue中，prop 是單向綁定的：當父元件的屬性變化時，将傳導給子元件，但是不會反過來。這是為了防止子元件無意修改了父元件的狀态——這會讓應用的資料流難以了解。是以如果我們在子元件中想要傳遞給父元件某些資訊的話，我們就需要用到另一種方法——vm.$emit

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模闆内
  // 同樣也可以在 vm 執行個體中像“this.message”這樣使用
  template: '<span>{{ message }}</span>',
  methods: {
    triggerEvent() {
      // 傳入事件名和需要傳遞的參數
      this.$emit('eventName', args)
    }
  }
})
           

<child @change="changeEvent" message="hello!"></child>
<!-- 在綁定事件的過程中，changeEvent方法并不需要傳入參數，在之後使用的時候傳入參數即可 -->
           

以上均為較常見的方法，在官方的文檔中也有比較詳盡的介紹。但是在之前的使用過程中，我需要在父元件中觸發子元件的某個方法，這時候需要怎麼做呢？在查閱文檔的過程中并沒有找到行之有效的辦法，之後通過查閱資料發現我們可以通ref為子元件指定一個索引，之後通過索引擷取子元件的事件，例：

this.$refs.child.childEventName
// 通過這種方式可以擷取到子元件的方法