在VUE上有没有一种方法可以使用:click event在parents name下显示子名称？

// 子组件
<template>
  <div>
    <button @click="showName">显示名称</button>
  </div>
</template>

<script>
export default {
  methods: {
    showName() {
      const name = '子名称';
      this.$emit('show-child-name', name);
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @show-child-name="displayChildName"></child-component>
    <div>{{ childName }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childName: ''
    }
  },
  methods: {
    displayChildName(name) {
      this.childName = name;
    }
  }
}
</script>