vue 当父组件挂载时在子组件中调用子组件的方法

在Vue中，当父组件挂载时在子组件中调用子组件的方法，可以通过使用ref引用子组件的实例，并在父组件中调用子组件的方法来实现。首先，在父组件模板中使用ref属性给子组件添加一个引用名称。然后，在父组件的setup函数中，通过ref()函数创建一个ref对象来引用子组件。接下来，可以在父组件的方法中使用引用名称来调用子组件的方法。

示例代码如下所示：
父组件：

<template>
  <div class="mt-5">
    <Son ref="RefChild"></Son>
    <div class="btn btn-primary my-2" @click="callChildMethod">点击我调用子组件的方法</div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import Son from "../components/Son.vue";

export default defineComponent({
  name: "Father",
  components: {
    Son,
  },
  setup() {
    const refChild = ref(); // refChild 要和 Son 组件上的 ref 名称相同

    const callChildMethod = () => {
      refChild.value.sonFn(); // sonFn 是子组件中的方法
    };

    return {
      refChild,
      callChildMethod,
    };
  },
});
</script>

子组件：

<template>
  <div>
    <h1>{{ content }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const content = ref("我是子组件");

    const sonFn = () => {
      content.value = "我被父组件调用了子组件的方法修改了数据";
    };

    return {
      content,
      sonFn,
    };
  },
});
</script>

在父组件中，我们使用ref属性给子组件添加一个引用名称`RefChild`。然后在父组件的setup函数中创建了一个ref对象`refChild`来引用子组件。最后，在父组件的`callChildMethod`方法中，通过`refChild.value.sonFn()`来调用子组件的方法`sonFn`。

这样，当父组件挂载时，就可以在子组件中调用子组件的方法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue里面父组件调用子组件的方法，以vue3为例](https://blog.csdn.net/weixin_43131046/article/details/122606635)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [前端Vue父组件挂载子组件弹窗,父组件按钮点击无法开子组件弹窗解决方案](https://blog.csdn.net/m0_49714202/article/details/127751239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]