defineExporse vue3中一个由子组件导出数据 让父组件调用的方法

子组件

<script setup> 
import { ref, reactive } from 'vue' 
const isFlag = ref(false)
const data = reactive({      
     name: 'tom',      
     age: 18   
 })    
//把数据导出 
defineExpose({      
     data,      
     isFlag
})    
</script>

父组件

<template>     
//给组件绑定ref,从ref上获取 
<Mode ref="refMode"></Mode>  
</template>   
<script setup> 
import { ref ,reactive,onMounted} from 'vue' 
import Mode from './view/mode.vue' 
let refMode = ref(null) // ref名称必须与绑定的名称相同      
console.log('refMode',refMode.value)    
onMounted(() => {     //只能在在里面才能获取到完整的组件ref的信息 
    console.log('refMode2',refMode.value)          //通过解构获取 
    const {data,isFlag} = refMode.value;
console.log('refMode3',data,isFlag)
}) </script>

posted on 2023-04-01 13:33  完美前端  阅读(552)  评论(0)    收藏  举报

导航