vue3子组件暴露方法

在Vue3中，子组件暴露方法有两种常用的方式。一种是通过使用`defineExpose`手动暴露属性和方法，另一种是使用`ref`来绑定子组件，并通过访问`变量名.value`来获取子组件内的属性和方法。

首先，通过使用`defineExpose`手动暴露属性和方法。在子组件中，你可以将需要暴露的属性和方法定义在`defineExpose`内。例如，在子组件中定义一个属性`name`和一个方法`sayHello`，然后在`defineExpose`中将它们暴露出来，像这样：

// 子组件
defineExpose({
  name: '子组件名称',
  sayHello() {
    console.log('Hello from 子组件');
  }
});

然后，在父组件中，你可以通过`ref`来引用子组件，并通过访问`变量名.value`来获取子组件暴露出来的属性和方法。像这样：

// 父组件模板
<template>
  <子组件 ref="变量名"></子组件>
</template>

// 父组件逻辑
<script>
import { ref } from 'vue';

export default {
  setup() {
    const 子组件引用 = ref(null);

    // 访问子组件暴露的属性和方法
    const 子组件名称 = 子组件引用.value.name;
    子组件引用.value.sayHello();

    return {
      子组件引用
    };
  }
};
</script>

另外一种方式是通过将子组件的实例赋值给一个变量，然后通过`变量名.子组件内属性`来获取子组件内的属性和方法。例如：
<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3/ 父组件 ref 获取子组件内属性或方法 子组件 defineExpose 暴露方法 或 属性 总结、](https://blog.csdn.net/m0_64494670/article/details/128667877)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue 组件三种export暴露方式和import引入方式](https://blog.csdn.net/weixin_41987908/article/details/127490370)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]