Vue3中setup语法糖学习

1，前言

---

script里面的代码会被编译成组件setup()函数的内容。这意味着与普通的

3，组件使用

---

3.1，动态组件

由于组件被引用为变量而不是作为字符串键来注册的，在

3.2，递归组件

一个单文件组件可以通过它的文件名被其自己所引用。例如：文件名为Foo.vue的组件可以在其模板中用引用它自己。如果名称冲突了，就需要使用别名。

import { Foo as FooBarChild } from './components'

注意：如果使用setup语法糖，递归组件会找不到，报错如下：

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

这时候，需要添加第二个script标签，写上组件名

<script setup lang="ts">
import { withDefaults } from 'vue'

interface IProps {
	list: Array<TAny>
}

const props = withDefaults(defineProps<IProps>(), {
	list: () => []
})
</script>
// 第二个script
<script lang="ts">
	export default {
		name: 'treeItem'
	}
</script>

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

往期文章

• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金