scrtpt setup 是 vue3 的语法糖,简化了组合式 API 的写法,并且运行性能更好。在 setup 函数中,所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。相对之前的写法,语法更简单。
1.自动注册属性和方法无需返回,直接使用。
1.<script setup> 语法糖并不是新增的功能模块,它只是简化了以往的组合API的必须返回(return)的写法,并且有更好的运行时性能。
2.在 setup 函数中:所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。使用方式:在 script 标签加上 setup 关键字即可
2.组件自动注册
在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。
3.defineProps 和 defineEmits
1.defineProps
defineProps ----> [用来接收父组件传来的 props]
2.defineEmits
defineEmit ----> [子组件向父组件事件传递]
使用defineEmit定义当前组件含有的事件,并通过返回的上下文去执行 emit。
- 子组件通过 defineProps 接收父组件传过来的数据
- 子组件通过 defineEmits 定义事件发送信息给父组件
4.useSlots() 和 useAttrs()
useAttrs:这是用来获取 attrs 数据,但是这和 vue2 不同,里面包含了class、属性、方法。useSlots: 顾名思义,获取插槽数据
5.defineExpose API
defineExpose ----> [组件暴露出自己的属性]
<script setup> 的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去,可以使用 defineExpose
6.新增指令v-memo
(待整理)
7.style v-bind
(待整理)
8.定义组件其他配置
(待整理)