VUE3获取子组件实例

1.使用refs获取子组件实例

1.组合式api

父组件

<!-- 父组件 Parent.vue -->
<template><div><Child ref="childRef" /><button @click="callChildMethod">调用子组件方法</button></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'// 1. 创建 ref 引用
const childRef = ref(null)// 2. 访问子组件实例
const callChildMethod = () => {if (childRef.value) {childRef.value.increment()console.log('子组件 count:', childRef.value.count)}
}
</script>

子组件

<!-- 子组件 Child.vue -->
<template><div>子组件</div>
</template><script setup>
import { ref } from 'vue'// 子组件的内部数据和方法
const count = ref(0)// 子组件的方法
const increment = () => {count.value++
}// 暴露给父组件访问的属性和方法
defineExpose({count,increment
})
</script>

2.选项式api

和vue2一样的使用this.$refs