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

在使用Vue的過程中，如果需要進行父子元件間的通訊，通過查閱官方文件
我們可以瞭解到只需要在子元件要顯式地用 props選項宣告它期待獲得的資料，同時在其使用過程中傳入相應的資料即可，例如：

Vue.component('child', {
  // 宣告 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內
  // 同樣也可以在 vm 例項中像“this.message”這樣使用
  template: '<span>{{ message }}</span>'
 

})

<child message="hello!"></child>

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

在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為子元件指定一個索引，之後通過索引獲取子元件的事件，例：

<child ref="child" @change="changeEvent" message="hello!"></child>

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