vue3子组建调用父组件

在 Vue 3 中，子组件可以通过将父组件的方法和数据作为 props 传递给子组件，从而调用父组件的方法和修改父组件的数据。下面是一个示例：

<template>
  <div>
    <ChildComponent :parentMethod="parentMethod" :parentData="parentData" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello from parent'
    }
  },
  methods: {
    parentMethod() {
      console.log('This method is called from the child component');
    }
  }
}
</script>

在上面的例子中，父组件将 `parentMethod` 方法和 `parentData` 数据通过 props 传递给子组件 `ChildComponent`。子组件可以通过 this.$props 访问这些 props，并调用父组件的方法或修改父组件的数据。

以下是子组件的示例代码：

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

<script>
export default {
  props: ['parentMethod', 'parentData'],
  methods: {
    callParentMethod() {
      this.parentMethod(); // 调用父组件的方法
    }
  }
}
</script>

在子组件中，通过 this.parentMethod() 调用父组件传递过来的方法，并且通过 this.parentData 访问父组件传递过来的数据。

这样子组件就可以调用父组件的方法和修改父组件的数据了。希望对你有所帮助！如果还有其他问题，请随时提问。