Vue3组件间通信知识整理——父组件调用子组件方法

先回忆一下Vue2.x中父组件调用子组件的方法，使用this.$refs.引用名，获取到组件或者块实例从而调用里面的方法或参数。在Vue3.x中支持Vue2.x的选项式API写法且在不使用setup语法糖的情景下，也是可以使用上述写法做到父组件调用子组件方法的。那么本文的重点就是在Vue3.x使用且使用setup语法糖的情景下，如何完成从父组件调用子组件参数或方法。答案是defineExpose。

父组件调用子组件方法

场景

先说说重构自己项目时遇到的场景⬇

图片红框里分别为两个组件，组件关系也如红框的包裹关系一样是父子关系。现在需要点击父组件中的选项时，同样能让子组件能根据选项作为新的显示策略。其中就要调用子组件中写好的搜索方法。

使用

// 父组件
<script setup>
import { ref,onMounted } from 'vue'
import childrenTest_oneVue from "./conponents/childrenTest_one.vue";

const childrenOne = ref(null)
onMounted(()=>{
  childrenOne.value.childMethod()
})
</script>

<template>
  <childrenTest_oneVue ref="childrenOne"/>
</template>

//----------------------分界线-----------------------
//子组件

<script setup>
const childStr = '我在子组件定义'
const childMethod = () => {
  console.log('我是在子组件定义的方法')
}
defineExpose({
  childStr,
  childMethod
})
</script>

总结

setup语法糖写法下组件是默认私有的，不同于选项式API和普通setup写法只要获取到相应的实例就可以完全访问到实例中的属性方法。而defineExpose就是setup语法糖写法中将特定属性、方法显式暴露的宏指令。只有在子组件通过defineExpose显式暴露的属性、方法才能被父组件通过ref获取并使用。需要注意defineExpose必须写在声明好的属性、方法之下，否则会报错！https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component

文章有问题之处还望评论斧正！

更多其他组件间通信文章链接放在下方⬇
Vue3组件间通信知识整理——父组件向子组件传参
Vue3组件间通信知识整理——子组件向父组件传参
Vue3组件间通信知识整理——兄弟组件之间通信