vue3怎么使用defineExpose

这篇文章主要介绍了vue3怎么使用defineExpose的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3怎么使用defineExpose文章都会有所收获，下面我们一起来看看吧。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

<script setup>import { ref } from 'vue'const a = 1const b = ref(2)defineExpose({  a,  b})</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

例子

父组件

<template>  <h3>defineExpose 使用 父组件</h3>  <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>  <h3>defineExpose 使用 子组件</h3>  <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”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。