vue3 setup语法糖 defineExpose使用

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