The method of directly calling the child component in the parent component in the Vue project

Method of directly calling subcomponents through ref

Parent component:

<template>
    <div>
        <Button @click="handleClick">Click to call sub-component method</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
              this.$refs.child.getCode();
        },
    },
}
</script>

Subassembly

<template>
  <div>This is a child component</div>
</template>
<script>
export default {
  methods: {
    getCode() {
      console.log('This is the method of the child component');
    },
  },
};
</script>