[vue3] 子组件调用父组件的方法

在Vue3中，子组件调用父组件的方法可以通过以下两种方式实现：

1. 通过props将父组件的方法传递给子组件，子组件通过调用props中的方法来触发父组件的方法。

父组件组件：

<template>
  <my-child :parentMethod="parentMethod"></my-child>
</template>
<script>
export default {
  methods: {
    parentMethod() {
      console.log('This is parent method');
    }
  }
}
</script>

子组件组件：

<template>
  <div @click="childMethod">Click me to call parent method</div>
</template>
<script>
export default {
  props: ['parentMethod'],  methods: {
    childMethod() {
      this.parentMethod();
    }
  }
}
</script>

2. 通过emit事件在子组件中触发父组件的方法。

父组件组件：

<template>
  <my-child @childMethod="parentMethod"></my-child>
</template>
<script>
export default {
  methods: {
    parentMethod() {
      console.log('This is parent method');
    }
  }
}
</script>

子组件组件：

<template>
  <div @click="emitMethod">Click me to call parent method</div>
</template>
<script>
export default {
  methods: {
    emitMethod() {
      this.$emit('childMethod');
    }
  }
}
</script>