首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue2升级vue3:单文件组件概述 及 defineExpos/expose

vue2升级vue3:单文件组件概述 及 defineExpos/expose

原创
作者头像
周陆军博客
发布于 2022-07-25 15:47:09
发布于 2022-07-25 15:47:09
2.4K00
代码可运行
举报
文章被收录于专栏:前端博客前端博客
运行总次数:0
代码可运行

像我这种react门徒被迫迁移到vue的,用管了TSX,地vue 单文件组件也不太感冒,但是vue3 单文件组件,造了蛮多api ,还不得去了解下

https://v3.cn.vuejs.org/api/sfc-script-setup.html#单文件组件-script-setup

definePropsdefineEmits没有什么好说的,就是setup中定义 props 与 emits。

useSlotsuseAttrs 它会返回与 setupContext.slots 和 setupContext.attrs

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default defineComponent({
  name: 'RefreshInterval',
  props: {//defineProps
    refreshFun: {
      type: Function,
    },
  },
  emits: ['change'],// defineEmits
  setup(props, { slots,attrs }) {//useSlots、useAttrs 
  }
})

其中比较迷惑的地方就是 defineexpose:

defineExpose

首先看官方文档:

https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose 使用 <script setup> 的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。 为了在 <script setup> 组件中明确要暴露出去的属性,使用 defineExpose 编译器宏: <script setup> import { ref } from 'vue' const a = 1 const b = ref(2) defineExpose({   a,   b }) </script> 当父组件通过模板 ref 的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

翻译成大白话就是:子组件是<script setup>声明时,父组件(非<script setup>)是不能直接访问子组件的方法,需要子组件手动的抛出才行。即:refChildren.value.children.props 是无效的。

expose

官方文档:https://staging-cn.vuejs.org/api/options-state.html#expose

默认情况下,当通过 $parent、$root 或模板 refs 访问时,组件实例将向父组件暴露所有的实例 property。这可能不是我们希望看到的,因为组件很可能拥有一些应保持私有的内部状态或方法,以避免紧耦合。 expose 选项期望一个 property 名称字符串的列表。当使用 expose 时,只有显式列出的 property 将在组件实例上暴露。 expose 仅影响用户定义的 property——它不会过滤掉内置的组件实例 property。 export default {   // 只有 `publicMethod` 在公共实例上可用   expose: ['publicMethod'],   methods: {     publicMethod() {       // ...     },     privateMethod() {       // ...     }   } }

使用expose函数来控制组件被ref时向外暴露的对象内容,借此来维护组件的封装性

其实把它理解为 React函数组件 中的 useImperativeHandle 就行!

子组件利用useImperativeHandle可以让父组件输出任意数据。 // FancyInput组件作为子组件 const FancyInput = React.forwardRef(function FancyInput(props, ref) {   const inputRef = useRef();   // 命令式的给`ref.current`赋值个对象   useImperativeHandle(ref, () => ({     focus: () => {       inputRef.current.focus()     }   }));      return <input ref={inputRef} ... /> }) // Example组件作为父组件 function Example() {   const fancyInputRef = useRef()   const focus = () => {     fancyInputRef.current.focus()   }   return (     <>       <FancyInput ref={fancyInputRef} />     </>   ) }

更多的,可以查看:Vue3 源码解析(九):setup 揭秘与 expose 的妙用  https://segmentfault.com/a/1190000040179961

参考文章:

vue3-什么是expose,是如何使用的,以及defineExpose的用法 https://blog.csdn.net/vet_then_what/article/details/125515694

Vue3中的expose函数 https://juejin.cn/post/6943950109268770830

最陌生的hooks: useImperativeHandle https://segmentfault.com/a/1190000040758640

useRef、useImperativeHandle https://www.jianshu.com/p/20aa551e44e7

转载本站文章《vue2升级vue3:单文件组件概述 及 defineExpos/expose》, 请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8872.html

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Vue3】都2022年了!你还没有感受过 Setup 语法糖的魅力吗?!
众所周知,Vue3中我们需要通过setup()函数进行return,setup语法糖解决了这个冗余的问题,在我司的这个项目中也是用到了 setup语法糖 + Ts,说实在的,咱就是说整个一个被香到了,感谢那些参与Vue3文档翻译工作的同学们,栓Q。
HoMeTown
2022/10/26
7250
Vue3.2+中setup语法糖的使用总结
vue3已经出来很长时间了,这一版本的写法在很多场景下由于要频繁return我们所定义的属性或者方法会让代码看起来非常繁琐,于是在3.2版本之后加入了script-setup语法糖,这一语法糖的加入让vue3的写法有了特别大的改变,这里是setup script文档:文档地址
Snine
2022/09/01
2.1K0
Vue3.0最新动态:script-setup 定稿,部分实验性 API 将弃用
最近一段时间挺忙,对 Vue 3.0 的更新记录看的比较少,今天看了一下 release 记录,发现最新的 2 个小版本对 script-setup 这个新特性改动还算蛮大的,之前的用法都调整了不少。
winty
2021/07/27
1.4K0
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的问题,基本都贴出对应文档地址,还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发,因此主要分几个方面总结:
pingan8787
2022/04/14
6.6K0
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
Vue2到Vue3,重学这5个常用的API
距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等。
玄姐谈AGI
2023/01/10
9360
Vue2到Vue3,重学这5个常用的API
vue2升级vue3:组合式 API之Setup(props,context)—Vue2.x到Vue3注意
vue3出来已经很长一段时间,项目已经用起来了。本篇是使用过程的中的一些零零散散的笔记的。
周陆军博客
2022/06/24
1.6K0
Vue 3 父子组件互调方法 - setup 语法糖写法
使用 <script setup> 的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。
訾博ZiBo
2025/01/06
6200
Vue 3 父子组件互调方法 - setup 语法糖写法
7个 Vue3 中的组件通信方式
本文采用<script setup />的编写方式,比options API更自由。然后我们会讲以下七种组件通信方式:
唐志远
2022/10/27
7850
7个 Vue3 中的组件通信方式
Vue3 源码解析(九):setup 揭秘与 expose 的妙用
在前几篇文章中我们一起学习了 Vue3 中新颖的 Composition API,而今天笔者要带大家一起看一下 Vue3 中的另一个新鲜的写法 —— setup。
Originalee
2021/06/21
3K0
初识 vue3 之单文件组件 script setup
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法,它具有更多优势:
Qwe7
2022/01/30
1.9K0
vue3与vue2的区别
新增context.emit,与this.$emit(vue3中只能在methods里使用)作用相同
前端小tips
2021/11/29
7060
vue3与vue2的区别
Vue3开发之components组件
开发过程中我们会经常遇到一些复杂的页面,而这些页面大部分由一个个小部分组合起来的,而且不同页面中可能有些部分是一样的,所以我们通常会将这些部分封装成组件。在Vue中,我们可以使用components组件(模板)来实现。
BennuCTech
2023/09/01
2.7K0
Vue3开发之components组件
vue2升级vue3: TSX Vue 3 Composition API Refs
虽然不推荐这么做,但是确实非常好用。但是vue2快速迁移到vue3,之前的这个写法因为干进度,不想重构,直接搬迁,发现不行?
周陆军博客
2022/07/30
7740
Vue3 过10种组件通讯方式
众所周知,Vue.js 中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法。
德育处主任
2022/04/17
2K0
Vue3 过10种组件通讯方式
Vue 3 组件通信方式总结
子组件接收父级自定义属性则与vue2不同,vue2中是以props 配置项来接收,vue3 中则需要 用到宏函数 defineProps类接收
iwhao
2024/07/24
3390
Vue & Element
Vue 是一套前端框架,免除原生 JavaScript 中的 DOM 操作,简化书写。Vue 基于 MVVM(Model-View-View-Model) 思想,实现数据的双向绑定,将编程的关注点放在数据上。
小简
2023/01/04
5.8K0
Vue & Element
关于 Vue3 + setup + ts 使用技巧的总结
ref 一般用于基本的数据类型,比如 string,boolean ,reactive 一般用于对象 ref 的地方其实也是调用的 reactive 实现的。
前端达人
2023/08/31
1.2K0
关于 Vue3 + setup + ts 使用技巧的总结
Vue2向Vue3过渡,持续记录
迁移指南:https://v3.cn.vuejs.org/guide/migration/introduction.html
房东的狗丶
2023/02/17
6.4K0
Vue 组件间通信的几种方式
Vue 遵循单向数据流的原则,状态会从父组件传递给子组件,避免子组件意外改变父组件状态导致的混乱逻辑。
前端西瓜哥
2022/12/21
2K0
前端系列14集-Vue3-setup
页面浏览量(Page View,PV)和访客数(Unique Visitors,UV)
达达前端
2023/10/08
5970
前端系列14集-Vue3-setup
相关推荐
【Vue3】都2022年了!你还没有感受过 Setup 语法糖的魅力吗?!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档