vue3setup子组件调用父组件方法方法

在Vue 3中，如果使用了`<script setup>`这种写法，父组件调用子组件的方法需要通过修饰子组件的方法来实现。具体步骤如下：

1. 在子组件的`<script setup>`标签中，使用`defineExpose`函数将需要暴露给外界的方法进行修饰。例如，在子组件的`popIt`方法前加上`defineExpose({ popIt })`进行修饰。

引用中的代码示例：

<script setup>
import { defineExpose } from "vue";
const popIt = () => {
  // 子组件方法的实现
};
defineExpose({ popIt });
</script>

2. 在父组件中，通过`ref`引用子组件，并调用修饰后的方法。例如，在父组件中的`<script setup>`标签中，可以使用`ref()`创建子组件的引用，然后通过`value`属性调用子组件的方法。

引用中的代码示例：

<script setup>
import pop from "./_pop";
const pop1 = ref();
pop1.value.popIt();
</script>

这样就可以在Vue 3的`<script setup>`中实现子组件调用父组件的方法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3 setup语法糖下父组件调用子组件的方法](https://blog.csdn.net/leftfist/article/details/128262225)[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_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue父组件调用子组件事件方法](https://download.csdn.net/download/weixin_38603204/12763352)[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_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]