父组件调用子组件中的方法，这是个看似不常见，但是大家都会遇到的问题。在vue2.x中可以用this.$refs、在vue3.x中也可以给子组件一个ref，然后直接.value来操作它，但是到了vue3.2中，似乎是不行了，那是因为你忽略了一个新的语法糖defineExpose。

在vue3.2中，由于使用了<script setup>，在这个标签中的变量或是方法需要你主动去暴露，不然在组件外部是无法直接获取到的。废话不多说，直接上例子。

<!-- 子组件 child.vue --> <script setup> const childMethod = () => { console.log('child method.') } // 主动暴露childMethod方法 defineExpose({ childMethod }) </script> <!-- 父组件 --> <script setup> import { ref } from 'vue' import child from './child.vue' const childRef = ref() const callChildMethod = () => { childRef.value.childMethod() } </script> <template> <child ref="childRef"></child> <button @click="callChildMethod">call</button> </template>

如上面的例子所示，在子组件中，我们使用defineExpose主动暴露了childMethod，所以在父组件中，就可以使用了。同样的，defineExpose是不需要引入的，但是eslint可能会检测到defineExpose未定义，这时直接引入它便好。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。