script setup - 简介

先来看一看官网关于 <script setup> 的介绍:

要彻底的了解 setup 语法糖,你必须先明确 setup() 这个 组合式API

官网中对于这一api的介绍是—— 在 setup() 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup() 暴露的属性

1.没有在 <script> 标签后添加 setup 时,你在声明/初始化 响应式 变量或者函数时,每一个都需要在 setup() 的return中进行返回,像这样:

  1. <script>
  2. import { ref } from 'vue'
  3. export default {
  4. setup() {
  5. const count = ref(0)
  6. // 返回值会暴露给模板和其他的选项式 API 钩子
  7. return {
  8. count
  9. }
  10. }
  11. }
  12. </script>

当你选择<script setup>语法糖时,即可免去这一恶心的操作

like this:

  1. <template>
  2. <!-- 组件自动注册 -->
  3. <Child />
  4. <!-- 变量自动注册 -->
  5. {{count}}
  6. </template>
  7. <script setup>
  8. // 注册的组件、变量、函数、方法示例直接暴露给模板
  9. import Child from './Child.vue'
  10. // 直接定义 count 无需返回
  11. const count = ref(0)
  12. </script>

2.组件核心 API 直接可以使用

类似 props 、 emits 、 slotsattrs

props : 通过defineProps指定当前 props 类型,获得上下文的props对象,一般用来定义组件的属性

  1. <script setup>
  2. import { defineProps } from 'vue'
  3. const props = defineProps({
  4. title: String,
  5. })
  6. </script>

父子组件传值的时候用到的 emits

使用defineEmit定义当前组件含有的事件,并通过返回的上下文去执行 emit

  1. <script setup>
  2. import { defineEmits } from 'vue'
  3. const emit = defineEmits(['change', 'delete'])
  4. </script>

小结

在以往的写法中,包括在vue2.0,定义数据和方法,都需要在结尾 return 出去,在能在dom模板中使用。而vue3.0新增的<script setup> 写法中,定义的属性和方法直接暴露给模板和示例组件而省去返回的环节,可以直接使用。

-- 希望本文可以帮助到你 2023年1月12日 --

【Vue3.0】关于 script setup 语法糖的用法的更多相关文章

  1. vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽

    刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本. 在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验 ...

  2. Vue3.2中的setup语法糖,保证你看的明明白白!

    vue3.2 到底更新了什么? 根据原文内容的更新的内容主要有以下 5 块: 1.SSR:服务端渲染优化.@vue/server-renderer包加了一个ES模块创建, 与Node.js解耦,使在非 ...

  3. 基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

    随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS ...

  4. vue3.0+ts+setup语法糖props写法

    写法一 import defaultImg from '@/assets/images/defaultImg.png' const props = defineProps({ src: { type: ...

  5. Vue3中setup语法糖学习

    目录 1,前言 2,基本语法 2,响应式 3,组件使用 3.1,动态组件 3.2,递归组件 4,自定义指令 5,props 5.1,TypeScript支持 6,emit 6.1,TypeScript ...

  6. Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理

    1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...

  7. C#7.0新特性和语法糖详解

    转自IT之家网--DotNet码农:https://www.ithome.com/html/win10/305148.htm 伴随Visual Studio 2017的发布,C#7.0开始正式走上工作 ...

  8. Razor 语法糖常规用法

    1.隐匿代码表达式 例: @model.name 会将表达式的值计算并写入到响应中,输入时采用html编码方式 2.显示表达式 例:@(model.name)会将输入@model.name字符串 3. ...

  9. Vue3 Composition API写烦了,试试新语法糖吧—setup script

    前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...

  10. vue3 script setup 定稿

    vue script setup 已经官宣定稿.本文主要翻译了来自 0040-script-setup 的内容. 摘要 在单文件组件(SFC)中引入一个新的 <script> 类型 set ...

随机推荐

  1. 2021东华杯misc project

    ​ project 题目附件发现是工程文件,按日期排序只有一个新的exe文件,那考点肯定就在这了 ​编辑 运行exe生成了一个zip ​编辑 打开解压缩的文件发现有三部分编码 base64 quote ...

  2. 齐博X1-栏目的调用5

    本节继续说明栏目的调用父级.同级.子级三层的栏目调用 父级.同级.子级三层的栏目调用 fun('sort@family',$fid,'cms') 比如下面栏目10利用这个函数,就可以调用出 父级9 同 ...

  3. 网页头部的声明应该是用 lang="zh" 还是 lang="zh-CN"?

    网页头部的声明应该是用 lang="zh" 还是 lang="zh-CN"? 遇到问题 不知道大家有没有留意到一个问题,就是使用 VsCode 新建的 html ...

  4. k8s机器群扩容问题

    今天遇到了一个很奇葩的问题.公司新人吧k8s集权扩容完后,发现服务器上的磁盘没有做分区2T磁盘没有做任何动作 把两台slave节点扩容上去的节点弄到了/目录.由于是生产环境情况比较特殊并没通过kube ...

  5. 驱动开发:内核层InlineHook挂钩函数

    在上一章<驱动开发:内核LDE64引擎计算汇编长度>中,LyShark教大家如何通过LDE64引擎实现计算反汇编指令长度,本章将在此基础之上实现内联函数挂钩,内核中的InlineHook函 ...

  6. 【Bluetooth|蓝牙开发】二、蓝牙开发入门

    个人主页:董哥聊技术 我是董哥,嵌入式领域新星创作者 创作理念:专注分享高质量嵌入式文章,让大家读有所得! [所有文章汇总] 1.蓝牙基础概念 蓝牙,是一种利用低功率无线电,支持设备短距离通信的无线电 ...

  7. MediatRPC - 基于MediatR和Quic通讯实现的RPC框架,比GRPC更简洁更低耦合,开源发布第一版

    大家好,我是失业在家,正在找工作的博主Jerry.作为一个.Net架构师,就要研究编程艺术,例如SOLID原则和各种设计模式.根据这些原则和实践,实现了一个更简洁更低耦合的RPC(Remote Pro ...

  8. 【云原生 · Kubernetes】部署kube-apiserver集群

    个人名片: 因为云计算成为了监控工程师‍ 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying 部署kube-apiserver集群 10.1 创建kube-apiserver 证书 10 ...

  9. HDLBits答案——Circuits

    1 Combinational Logic 1.1 Basic Gates 1.1.1 Exams/m2014 q4h module top_module ( input in, output out ...

  10. UBOOT编译--- UBOOT的编译和链接选项详解(六)

    1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 函数 cc-option 编译选项变量cc-option 定义在 scripts/Kbuild.incl ...