vueの親コンポーネントがサブコンポーネントを呼び出す方法

vueではrefがDOMを取得できることはよく知られていますが、サブコンポーネントのインスタンスを取得し、サブコンポーネントを呼び出す方法にも使用できます.サブアセンブリコードは次のとおりです.

<template>
  <div/>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('        ');
    }
  }
};
</script>

親コンポーネントコードは、親コンポーネントに導入されたサブコンポーネントにrefを付けると、this.$ref.method呼び出し

<template>
  <div 
    class="parent" 
    @click="parentMethod">
       
    <child ref="children"/>
  </div>
</template>
<script>
import Child from './child';
export default {
  components: {
    Child
  },
  methods: {
    parentMethod() {
      //         
      this.$refs.children.childMethod();
    }
  }
};
</script>
<style lang="scss" scoped>
.parent {
  width: 50px;
  height: 20px;
  background: blueviolet;
}
</style>