Vue3父组件访问子组件方法/属性的五种方案

<!-- 子组件 Child.vue  -->
<script setup>
import { ref } from 'vue'
 
const childData = ref('子组件数据')
const childMethod = () => console.log(' 方法被触发')
 
// 必须暴露才能被父组件访问
defineExpose({
  childData,
  childMethod
})
</script>
 
<!-- 父组件 Parent.vue  -->
<template>
  <Child ref="childRef" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
const childRef = ref(null)
 
onMounted(() => {
  console.log(childRef.value.childData)  // 输出：子组件数据
  childRef.value.childMethod()           // 触发子组件方法
})
</script>

// 子组件
defineExpose({ customMethod: () => {} })
 
// 父组件
import { getCurrentInstance } from 'vue'
 
const instance = getCurrentInstance()
const childComponent = instance.refs.childRef 
childComponent.customMethod() 

<!-- 子组件 -->
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
 
const updateData = (val) => {
  emit('update:modelValue', val)
}
</script>
 
<!-- 父组件 -->
<Child :modelValue="parentData" @update:modelValue="handleUpdate"/>

// 祖先组件
provide('sharedData', ref('可响应数据'))
 
// 后代组件
const data = inject('sharedData')

// store/userStore.js 
export const useUserStore = defineStore('user', {
  state: () => ({ userInfo: null })
})
 
// 任意组件
const store = useUserStore()
store.userInfo  = '全局数据'