前言

在vue專案中元件之間的通訊是很常見的問題，同時也是很重要的問題，我們大致可以將其分為三種情況：

1. 1.父傳子：在父元件中繫結值，在子元件中用props接收
2. 2.子傳父：在父元件中監聽一個事件，在子元件中利用$emit觸發這個事件並帶上資料作為第二個引數，這時父元件中監聽事件的回撥函式就會被呼叫，回撥函式的引數就是子元件帶上來的資料，這樣就可以在父元件中使用子元件的資料了，
3. 3.兄弟之間的傳遞：我們可以使用事件匯流排（eventBus）來輕鬆的解決，其實就是釋出訂閱者模式

今天我們要看的是父元件如何直接調取子元件的資料和方法，而不是通過子元件傳上來的

在這裡我們要理解父元件直接拿事件是在父元件上，子元件傳上來資料，事件是在子元件上，是完全不同的兩種情況

程式碼展示

子元件 children.vue,我們在子元件中定義了資料sonData和方法sonMethod

// children.vue

<template>
  <div>我是 children</div>
</template>

<script>
export default {
  data: () => ({
    sonData: '我是子元件的資料！'
  }),
  methods: {
    sonMethod() {
      console.log('我是子元件的方法！')
    }
  },
  computed: {
    
  },
  created() {

  }
}
</script>
 

父元件 檔案

// 父元件

<template>
  <div>
    <children ref='ch'>
    </children>
    <h1 @click="onclick">父元件</h1>
  </div>
</template>

<script>
import children from './coms/children'
export default {
  data() {
    return {}
  },
  components: {
    children
  },
  methods: {
    onclick() {
    // 或者 let chil = this.$refs['ch']
      let chil = this.$refs.ch

    // 父元件可以通過$refs拿到子元件的物件
    // 然後直接呼叫子元件的 methods裡的方法和data裡的資料
      console.log(chil) //子元件物件
      console.log(chil.sonData) // 我是子元件的資料
      console.log(chil.sonMethod()) // 我是子元件的方法
    }
  }
}
</script>
 

注意事項

因為 ref 本身是作為渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在！，所以它不是響應式的，不能用在模板或者計算屬性中。