vue3 使用defineExpose的实例详解
短信预约 -IT技能 免费直播动态提醒
可以通过 defineExpose
编译器宏来显式指定在 <script setup>
组件中要暴露出去的属性:
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number }
(ref 会和在普通实例中一样被自动解包)
例子
父组件
<template>
<h2>defineExpose 使用 父组件</h2>
<child ref="getChildData"></child>
</template>
<script setup lang="ts">
import Child from "@/components/exposeChildren.vue"
import { ref,onMounted,toRaw} from 'vue'
// 文档说setup写在script上组件是关闭的
// 也就是说父组件使用getChildData.xxx访问不到子组件的数据
// 此时我们需要用defineExpose把需要传递的数据暴露出去,这样外部才能访问到
// 同理也可以接收外部传来的值
const getChildData = ref(null)
const obj = {
name: 'alan',
desc: '大笨蛋',
age: 18
}
const cc= getChildData.value?.['num']
console.log(cc) //undefined,此时还未找到子组件暴露的数据
onMounted(()=>{
//获取子组件的data数据,什么时候获取根据自己业务来
const bb:any= getChildData.value?.['updata']
console.log(bb()) // 123,这时候得到的是子组件的初始值,因为还未给子组件传递数据
const a:any= getChildData.value?.['getData']
a(obj) ////给子组件传递数据
const b:any= getChildData.value?.['updata']
const c= getChildData.value?.['num']
console.log(toRaw(b())) // {name: 'alan', desc: '大笨蛋', age: 18} ,这里得到的是个proxy,所以需要toRaw()方法转成对象
console.log(c) // 666
})
</script>
<style scoped>
</style>
子组件
<template>
<h2>defineExpose 使用 子组件</h2>
<div>{{ data }}</div>
</template>
<script setup lang="ts">
import { ref, defineExpose } from 'vue'
const data = ref(123)
const num = ref(666)
defineExpose({
updata(){
return data.value //暴露出去父组件可以拿到data的数据.此时值为123
},
getData(res:any){
data.value = res //父组件传递来的值赋值给data
// 此时的data变成了 Proxy
// {
// name: 'alan',
// desc: '大笨蛋',
// age: 18
// }
},
num
})
</script>
<style scoped>
</style>
到此这篇关于vue3 使用defineExpose的文章就介绍到这了,更多相关vue3 使用defineExpose内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341