vue3怎么使用defineExpose

其他教程   发布日期:2023年09月30日   浏览次数:578

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

可以通过

  1. defineExpose
编译器宏来显式指定在
  1. <script setup>
组件中要暴露出去的属性:
  1. <script setup>
  2. import { ref } from 'vue'
  3. const a = 1
  4. const b = ref(2)
  5. defineExpose({
  6. a,
  7. b
  8. })
  9. </script>

当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样

  1. { a: number, b: number }
(ref 会和在普通实例中一样被自动解包)

例子

父组件

  1. <template>
  2. <h3>defineExpose 使用 父组件</h3>
  3. <child ref="getChildData"></child>
  4. </template>
  5. <script setup lang="ts">
  6. import Child from "@/components/exposeChildren.vue"
  7. import { ref,onMounted,toRaw} from 'vue'
  8. // 文档说setup写在script上组件是关闭的
  9. // 也就是说父组件使用getChildData.xxx访问不到子组件的数据
  10. // 此时我们需要用defineExpose把需要传递的数据暴露出去,这样外部才能访问到
  11. // 同理也可以接收外部传来的值
  12. const getChildData = ref(null)
  13. const obj = {
  14. name: 'alan',
  15. desc: '大笨蛋',
  16. age: 18
  17. }
  18. const cc= getChildData.value?.['num']
  19. console.log(cc) //undefined,此时还未找到子组件暴露的数据
  20. onMounted(()=>{
  21. //获取子组件的data数据,什么时候获取根据自己业务来
  22. const bb:any= getChildData.value?.['updata']
  23. console.log(bb()) // 123,这时候得到的是子组件的初始值,因为还未给子组件传递数据
  24. const a:any= getChildData.value?.['getData']
  25. a(obj) ////给子组件传递数据
  26. const b:any= getChildData.value?.['updata']
  27. const c= getChildData.value?.['num']
  28. console.log(toRaw(b())) // {name: 'alan', desc: '大笨蛋', age: 18} ,这里得到的是个proxy,所以需要toRaw()方法转成对象
  29. console.log(c) // 666
  30. })
  31. </script>
  32. <style scoped>
  33. </style>

子组件

  1. <template>
  2. <h3>defineExpose 使用 子组件</h3>
  3. <div>{{ data }}</div>
  4. </template>
  5. <script setup lang="ts">
  6. import { ref, defineExpose } from 'vue'
  7. const data = ref(123)
  8. const num = ref(666)
  9. defineExpose({
  10. updata(){
  11. return data.value //暴露出去父组件可以拿到data的数据.此时值为123
  12. },
  13. getData(res:any){
  14. data.value = res //父组件传递来的值赋值给data
  15. // 此时的data变成了 Proxy
  16. // {
  17. // name: 'alan',
  18. // desc: '大笨蛋',
  19. // age: 18
  20. // }
  21. },
  22. num
  23. })
  24. </script>
  25. <style scoped>
  26. </style>

以上就是vue3怎么使用defineExpose的详细内容,更多关于vue3怎么使用defineExpose的资料请关注九品源码其它相关文章!