// 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>