]
return{
todoList,
}
}
}
使用 script setup 语法糖,不需要 return 和 setup函数,只需要全部定义到 script setup 内。
可以简化上述代码为:
{{todoList}}
2、组件自动注册
在 script setup 语法糖中,引入的组件可以自动注册,不需要再通过 components 进行注册,而且无法指定当前组件的名字,会自动以文件名为主,省去了 name 属性。
而在 setup() 写的组合式 API 中,引入的组件必须在 components 内注册之后才能使用,否则无法正常引入。
3、组件数据传递
父组件给子组件传值时,需要 props 接收。setup( props, context )接收两个参数,props 接收传递的数据,使用 setup() 接收数据如下:
{{ a }} {{ b }}
而 script setup 语法糖接收 props 中的数据时,使用 defineProps 方法来获取,可以修改上述代码为:
{{ a }} {{ b }}
4、获取 attrs、slots 和 emits
setup( props, context )接收两个参数,context 上下文环境,其中包含了属性、插槽、自定义事件三部分。
setup() 内获取如下:
setup(props,context){
const { attrs, slots, emit } = context
// attrs 获取组件传递过来的属性值,
// slots 组件内的插槽
// emit 自定义事件 子组件
}
使用 script setup 语法糖时,
-
useAttrs 方法 获取 attrs 属性
-
useSlots 方法获取 slots 插槽
-
defineEmits 方法获取 emit 自定义事件
常用的JavaScript设计模式
-
单体模式
-
工厂模式
-
例模式
函数
-
函数的定义
-
局部变量和全局变量
-
返回值
-
匿名函数
-
自运行函数
-
闭包
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】