Vue3父组件读取子组件属性方法(通过模板引用)
在子组件中暴露属性:子组件必须使用
defineExpose编译器宏,显式暴露需要被父组件访问的属性和方法。// ChildComponent.vue <script setup> import { ref } from 'vue' const childCount = ref(0) const childMethod = () => { childCount.value++ console.log('子组件方法被调用') } // 关键步骤:暴露给父组件 defineExpose({ childCount, childMethod }) </script>
在父组件中获取引用:父组件通过
ref属性为子组件创建引用,然后在生命周期(如onMounted)或方法中通过value属性访问。// ParentComponent.vue <template> <ChildComponent ref="childRef" /> <button @click="callChildMethod">调用子组件方法</button> </template> <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent.vue' const childRef = ref(null) // 创建ref const callChildMethod = () => { if (childRef.value) { childRef.value.childMethod() // 调用子组件方法 console.log('子组件的count:', childRef.value.childCount) // 读取子组件属性 } } onMounted(() => { // 组件挂载后即可访问 console.log(childRef.value) }) </script>