vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽
刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本。
在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验性提案的提示,在 V3.2 中,才会去除提示并移除一些废弃的 API。
script setup 是啥?
是 vue3 的新语法糖,并不是新增的功能模块,只是简化了以往的组合式 API 必须返回(return)的写法,并且有更好的运行时性能。
写法简便:
<script setup>
...
</script>
使用 script setup 语法糖时,内部的属性或方法可以直接使用,无需 return 返回;引入子组件可以自动注册,无需 components 注册可直接使用等等,接下来介绍 script setup 语法糖具体使用以及与 setup() 函数的区别。
1、属性和方法无需返回,可直接使用
setup() 来写组合式 API 时,内部定义的属性和方法,必须使用 return 暴露到上下文,外部才能够使用,否则就会报错,写法为:
<template>
{{todoList}}
</template>
<script>
export default {
setup(){
let todoList = [
{todo:"我想看海",isCheck:false},
{todo:"我想浪漫",isCheck:true},
]
return{
todoList,
}
}
}
</script>
使用 script setup 语法糖,不需要 return 和 setup函数,只需要全部定义到 script setup 内。
可以简化上述代码为:
<template>
{{todoList}}
</template>
<script setup>
let todoList = [
{todo:"我想看海",isCheck:false},
{todo:"我想浪漫",isCheck:true},
]
</script>
2、组件自动注册
在 script setup 语法糖中,引入的组件可以自动注册,不需要再通过 components 进行注册,而且无法指定当前组件的名字,会自动以文件名为主,省去了 name 属性。
<template>
<SetUp></SetUp>
<set-up></set-up>
</template>
<script setup>
import SetUp from "./SetUp.vue"
</script>
而在 setup() 写的组合式 API 中,引入的组件必须在 components 内注册之后才能使用,否则无法正常引入。
3、组件数据传递
父组件给子组件传值时,需要 props 接收。setup( props, context )接收两个参数,props 接收传递的数据,使用 setup() 接收数据如下:
<template>
{{ a }} {{ b }}
</template> <script>
import { toRefs } from "vue"
export default {
setup(props,context){
const { a,b } = toRefs(props)
return {
a,
b
}
}
}
</script>
而 script setup 语法糖接收 props 中的数据时,使用 defineProps 方法来获取,可以修改上述代码为:
<template>
{{ a }} {{ b }}
</template> <script setup>
import { toRefs } from "vue"
const props = defineProps({
a: String,
b: String
})
const { a, b } = toRefs( props )
</script>
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 自定义事件
<script setup>
import { useAttrs, useSlots } from 'vue'
const slots = useSlots();
const attrs = useAttrs(); const emits = defineEmits(['getChild']);
</script>
5、对外暴露属性
script setup 语法糖的组件默认不会对外暴露任何内部声明的属性。如果有部分属性要暴露出去,可以使用 defineExpose。
子组件暴露属性:
<template>
{{msg}}
</template> <script setup>
import { ref } from 'vue' let msg = ref("Child Components"); // defineExpose无需导入,直接使用
defineExpose({
msg
});
</script>
父组件引用子组件暴露的属性:
<template>
<Child ref="child" />
</template> <script setup>
import { ref, onMounted } from 'vue'
import Child from './components/Child.vue' let child = ref(null); onMounted(() => {
console.log(child.value.msg); // Child Components
console.log(child.value.num); // 123
})
</script>
vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽的更多相关文章
- Java基础学习笔记九 Java基础语法之this和super
构造方法 我们对封装已经有了基本的了解,接下来我们来看一个新的问题,依然以Person为例,由于Person中的属性都被private了,外界无法直接访问属性,必须对外提供相应的set和get方法.当 ...
- 基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS ...
- 《DOM Scripting》学习笔记-——第二章 js语法
<Dom Scripting>学习笔记 第二章 Javascript语法 本章内容: 1.语句. 2.变量和数组. 3.运算符. 4.条件语句和循环语句. 5.函数和对象. 语句(stat ...
- 多线程学习笔记九之ThreadLocal
目录 多线程学习笔记九之ThreadLocal 简介 类结构 源码分析 ThreadLocalMap set(T value) get() remove() 为什么ThreadLocalMap的键是W ...
- MDX导航结构层次:《Microsoft SQL Server 2008 MDX Step by Step》学习笔记九
<Microsoft SQL Server 2008 MDX Step by Step>学习笔记九:导航结构层次 SQL Server 2008中SQL应用系列及BI笔记系列--目录索 ...
- python3.4学习笔记(九) Python GUI桌面应用开发工具选择
python3.4学习笔记(九) Python GUI桌面应用开发工具选择 Python GUI开发工具选择 - WEB开发者http://www.admin10000.com/document/96 ...
- Go语言学习笔记九: 指针
Go语言学习笔记九: 指针 指针的概念是当时学C语言时了解的.Go语言的指针感觉与C语言的没啥不同. 指针定义与使用 指针变量是保存内存地址的变量.其他变量保存的是数值,而指针变量保存的是内存地址.这 ...
- Hadoop学习笔记之HBase Shell语法练习
Hadoop学习笔记之HBase Shell语法练习 作者:hugengyong 下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如下: 名称 命令 ...
- go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin)
目录 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin) zipkin使用demo 数据持久化 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin ...
随机推荐
- C#开发BIMFACE系列52 CS客户端集成BIMFACE应用的技术方案
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在我的博客<C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案>.<C#开发BI ...
- CAM对象样式表
CAM对象样式表 121 160 UF_machining_task_type UF_mach_order_task_subtype 112 UF_machining_null_grp_type 无 ...
- 【UE4 C++】DateTime、Timespan 相关函数
基于UKismetMathLibrary DateTime 相关函数 Timespan 运算操作相关函数见尾部附录 /** Returns the date component of A */ UFU ...
- AIApe问答机器人Scrum Meeting 4.27
Scrum Meeting 3 日期:2021年4月27日 会议主要内容概述:汇报两日工作. 一.进度情况 组员 负责 两日内已完成的工作 后两日计划完成的工作 工作中遇到的困难 李明昕 后端 Tas ...
- [no code][scrum meeting] Beta 4
例会时间:5月16日11:30,主持者:伦泽标 下次例会时间:5月18日11:30,主持者:叶开辉 一.工作汇报 人员 昨日完成任务 明日要完成的任务 乔玺华 完成整体框架设计与登录逻辑 与后端对接 ...
- 软件工程个人博客作业-软件案例分析:VS与VS Code
项目 内容 本作业属于北航 2020 年春软件工程 博客园班级连接 本作业是本课程个人项目作业 作业要求 我在这个课程的目标是 提高软件开发能力.团队协作能力 这个作业在哪个具体方面帮助我实现目标 提 ...
- [ NOIP2013 D2-T3 ] 华容道
NOIP2013 华容道 图论好题. 介于网上全是些令蒟蒻头昏的题解和排版一塌糊涂以及过于详细的题解...蒟蒻记录一下.. 显然需要将白格移动到 \(s\) 相邻格,然后交换 \(s\) 与白格,再将 ...
- RabbitMQ多消费者顺序性消费消息实现
最近起了个项目消息中心,用来中转各个系统中产生的消息,用到的是RabbitMQ,由于UAT环境.生产环境每台消费者服务都是多台,有些消息要求按顺序消费,所以需要采取一定的措施保证消息的顺序消费,下面讲 ...
- 用STM32定时器中断产生PWM控制步进电机
控制步进电机可以使用PWM.定时器中断.延时,这里用的就是定时器中断来让它转动. 一.硬件部分1.使用的硬件板子用的是正点原子的STM32F103 mini板,驱动器是DM420(DM420驱动器资料 ...
- C语言的“隐式函数声明”违背了 “前置声明” 原则
这个问题来源于小组交流群里的一个问题: 最终问题落脚在 : 一个函数在main中调用了,必须在main之前定义或者声明吗? 我在自己的Centos上做了实验,结果是函数不需要,但是结构体(变量也要)需 ...