defineExpose 顾名思义就是把数据导出，供父组件使用，相当于子传父

mode组件

<template>


  <div>我是demo组件</div>

</template>


<script setup>

  import { ref, reactive } from 'vue'


  const isFlag = ref(false)

  const data = reactive({

    name: 'tom',

    age: 18

  })

  //把数据导出
  defineExpose({

    data,

    isFlag

  })

  </script>

App组件

<template>
    //给组件绑定ref，从ref上获取
  <Mode ref="refMode"></Mode>

</template>


<script setup>

  import { ref ,reactive,onMounted} from 'vue'

  import Mode from './view/mode.vue'
    
  //ref名称必须与绑定的名称相同
  let refMode = ref(null)
   
  //setup ## beforeCreate、create生命周期的集合这里是获取不到的
  console.log('refMode',refMode.value)

  onMounted(() => {
    //只能在在里面才能获取到完整的组件ref的信息
    console.log('refMode2',refMode.value)
    
    //通过解构获取
    const {data,isFlag} = refMode.value

    console.log('refMode3',data,isFlag)

  })


 

</script>


<style>

  #app {

    text-align: center;

  }

</style>

结果如图