Vue如何直接調用Component裏的方法

有時候，我們需要在另一個A Component裏直接調用B Component裏的方法，但Vue的Component和我們平常寫的JavaScript module不一樣，不能簡單的通過import後就直接調用，下面是我找到的一種方法，目前測試可用

<template>
  <div>
    <b-component ref="BComponent"></b-component>
  </div>
</template>
<script>
import BComponent from './BComponent'
export default {
  name: 'A',
  data () {
  },
  components: {
    BComponent
  },
  methods: {
    callACompoentFunction () {
      this.$refs.BComponent.sayHi()
    }
  }
}
</script>
<style scoped>
</style>

BComponent.vue
<template>
  <div></div>
</template>
<script>
export default {
  name: 'B',
  data () {
  },
  methods: {
    sayHi () {
      console.log('Hello world!')
    }
  }
}
</script>
<style scoped>
</style>