uniapp调用子组件方法vue3

在Vue3和uniapp中，要实现父组件调用子组件的方法，可以使用ref属性和$refs。在子组件上添加属性ref和属性名（可以任意指定），然后在父组件中使用this.$refs.(属性名).(子组件方法)来调用子组件的方法。例如，父组件模板如下所示：

<template>
  <view class="">
    <son ref="mySon"></son>
    <button @click="fatherClick">父组件按钮</button>
  </view>
</template>

父组件的脚本部分可以这样写：

import son from '@/components/son.vue'

export default {
  components: {
    son
  },
  methods: {
    fatherClick() {
      this.$refs.mySon.sonClick("father call son");
    }
  }
}

其中，son是子组件的引入路径，fatherClick是父组件的方法，通过this.$refs.mySon来访问子组件的方法sonClick。

而子组件的模板可以这样写：

<template>
  <view class="">
    <text>子组件</text>
  </view>
</template>

子组件的脚本部分可以这样写：

export default {
  name: 'son',
  methods: {
    sonClick(e) {
      console.log(e)
    }
  }
}

这样，在父组件中点击按钮时，就会调用子组件的sonClick方法，并输出"father call son"到控制台。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [UNI-APP_使用vue3组件通讯,父组件调用子组件方法等](https://blog.csdn.net/weixin_44599931/article/details/128951814)[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* *3* [uniapp 中父组件调用子组件方法](https://blog.csdn.net/weixin_49175501/article/details/117334781)[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 ]