锐客网

  1. 首页 > it技术 > >

Vue3中setup语法糖学习


目录

  • 1，前言
  • 2，基本语法
  • 2，响应式
  • 3，组件使用
    • 3.1，动态组件
    • 3.2，递归组件
  • 4，自定义指令
  • 5，props
    • 5.1，TypeScript支持
  • 6，emit
    • 6.1，TypeScript支持
  • 7，defineExpose暴露
  • 8，useSlots 和 useAttrs
  • 9，与普通的script一起使用

1，前言
script里面的代码会被编译成组件setup()函数的内容。这意味着与普通的
3，组件使用
3.1，动态组件 由于组件被引用为变量而不是作为字符串键来注册的，在
3.2，递归组件 一个单文件组件可以通过它的文件名被其自己所引用。例如：文件名为Foo.vue的组件可以在其模板中用引用它自己。如果名称冲突了，就需要使用别名。
import { Foo as FooBarChild } from './components'

4，自定义指令 全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用，就像上文所提及的组件一样。但这里有一个需要注意的限制：必须以 vNameOfDirective的形式来命名本地自定义指令，以使得它们可以直接在模板中使用
  • 基本语法

  • 导入指令

5，props 在
5.1，TypeScript支持
  • 仅限类型声明
const props = defineProps<{ foo: string bar?: number }>()

  • 默认值
interface Props { msg?: string labels?: string[] }const props = withDefaults(defineProps(), { msg: 'hello', labels: () => ['one', 'two'] })

6，emit 在
6.1，TypeScript支持
  • 仅限类型声明
const emit = defineEmits<{ (e: 'change', id: number): void (e: 'update', value: string): void }>()

7，defineExpose暴露 使用
8，useSlots 和 useAttrs 在模板中通过$slots和$attrs来访问它们

9，与普通的script一起使用
如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；END
PS：在本页按F12，在console中输入document.querySelectorAll('.diggit')[0].click()，有惊喜哦
Vue3中setup语法糖学习
文章图片

公众号
【Vue3中setup语法糖学习】Vue3中setup语法糖学习
文章图片

往期文章
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • 超详细！Vue-Router手把手教程
  • vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
  • 微信小程序实现搜索关键词高亮
  • 超详细！Vue的九种通信方式
  • 超详细！Vuex手把手教程
个人主页
  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

    推荐阅读


    上一篇：Linux-本地日志服务管理（rsyslog基础）

    下一篇：EE1612