vue3 父组件调用子组件方法

• 在父组件的模板中，给子组件标签添加ref属性，用于获取子组件的引用。例如，有一个父组件Parent.vue和子组件Child.vue，在Parent.vue中：

<template>
  <div>
    <h1>父组件</h1>
    <Child ref="childComponentRef"></Child>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
const childComponentRef = ref(null);
const callChildMethod = () => {
  if (childComponentRef.value) {
    // 假设子组件有一个名为childMethod的方法
    childComponentRef.value.childMethod();
  }
};
</script>

• 在子组件Child.vue中，通过defineExpose函数将希望被父组件调用的方法暴露出来。

<template>
  <div>
    <h2>子组件</h2>
  </div>
</template>
<script setup>
const childMethod = () => {
  console.log('子组件的方法被调用了');
};
// 将方法暴露给父组件
defineExpose({
  childMethod
});
</script>

• 父组件（Parent.vue）

  <template>
    <div>
      <h1>父组件</h1>
      <Child></Child>
    </div>
  </template>
  <script setup>
  import Child from './Child.vue';
  const parentMethod = () => {
    console.log('父组件的方法被调用了');
  };
  </script>
  

• 子组件（Child.vue）

  <template>
    <div>
      <h2>子组件</h2>
      <button @click="callParentMethod">调用父组件方法</button>
    </div>
  </template>
  <script setup>
  const callParentMethod = () => {
    // 通过$parent访问父组件方法
    if (this.$parent && typeof this.$parent.parentMethod === 'function') {
      this.$parent.parentMethod();
    }
  };
  </script>