官网链接
- setup中声明的任何顶级绑定(变量和导入)都可以在模板中直接使用
- 组件和动态组件
setup范围内的值也可以直接用作自定义组件标记名
setup中使用动态组件时,我们应该使用dynamic:is绑定
- 指令
注册指令,需要以小写v开头。详情请看上面官网链接
- 使用props
const props = defineProps<{msg: string}>()
<template>
<h1 ref="title">
{{ props.msg }}
</h1>
</template>
- 给props设置默认值
const props = withDefaults(defineProps<Props>(), {
msg: 'hello'
})
- 使用事件
- 在不导入defineEmits等方法时,eslint要是报错可以加上这一段代码
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
}
-
slots和attrs
-
顶层中使用await ,内部会自动为setup加上async
-
与普通的script一起使用。只有在按需导出时才被使用
-
定义选项api
<script>
export default {
name: 'CustomName',
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// script setup logic
</script>
- 缺点
volar插件已经支持这种语法
更多的缺点可以看文档