vue3 子组件调用父组件中的方法

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

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

父组件组件：

<template>
  <div>
    <child-component :parentMethod="parentMethod"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('This is a method in parent component');
    }
  }
}
</script>

子组件组件：

<template>
  <div>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>

<script>
export default {
  props: {
    parentMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentMethod() {
      this.parentMethod();
    }
  }
}
</script>

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

父组件组件：

<template>
  <div>
    <child-component @callParentMethod="parentMethod"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('This is a method in parent component');
    }
  }
}
</script>

子组件组件：

<template>
  <div>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$emit('callParentMethod');
    }
  }
}
</script>