vue3子调用父组件方法

在Vue 3中，我们可以使用`$emit`方法来从子组件向父组件传递数据和事件。通过在子组件中调用`$emit`方法并传递事件名称，我们可以触发在父组件中定义的方法。

以下是如何在Vue 3中从子组件调用父组件方法的示例代码：

父组件：

<template>
  <div>
    <h2>{{ message }}</h2>
    <ChildComponent @childEvent="parentMethod" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent component!'
    }
  },
  methods: {
    parentMethod(data) {
      console.log('Received data from child:', data);
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="sendData">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data = 'Hello from child component!';
      this.$emit('childEvent', data);
    }
  }
}
</script>

在上面的示例代码中，当我们在子组件中点击按钮时，会触发`sendData`方法，该方法会使用`$emit`方法将事件`childEvent`和数据`data`发送到父组件中。在父组件中，我们定义了`parentMethod`方法，该方法会在收到来自子组件的数据时被触发，并在控制台中打印出数据。

这就是如何在Vue 3中从子组件调用父组件方法。