vue3 defineExpose 使用

//父组件
<div class='parent'>
    <child ref="getChildData"></child> //子组件
</div>

<script setup>
  import { ref } from 'vue'
    // 文档说setup写在script上组件是关闭的
    // 也就是说父组件使用getChildData.xxx访问不到子组件的数据
    // 此时我们需要用defineExpose把需要传递的数据暴露出去，这样外部才能访问到
    // 同理也可以接收外部传来的值

const getChildData = ref(null)
const obj = {
    name: 'celina',
    desc: '大笨蛋',
    age: 18
}

//给子组件传递数据
getChildData.value.getData() = obj

//获取子组件的data数据，什么时候获取根据自己业务来
const a = getChildData.value.updata()

</script>


//子组件
<div class="child"></div>

<script>
import { ref, defineExpose } from 'vue'

const data = ref(null)

defineExpose({
    getData(res){
        data.value = res //父组件传递来的值赋值给data
        `此时的data变成了
            {
            name: 'celina',
            desc: '大笨蛋',
            age: 18
            }
           `
    },
    updata(){
        return data.value //暴露出去父组件可以拿到data的数据
    }
})
  
</script>