vue3 setup写不写到标签上的区别
在vue3种setup的写法,可以单独写setup()也可以写到script标签中,当然我们推荐后面这种
他的好处有很多,代码也简洁很多。
1、属性和方法无需return,可直接使用
/*原先*/
<script>
import { defineComponent } from "vue"
export default defineComponent({name: 'app',setup(){ let a='bbb'; return{a}}
})
</script>
/*使用script-setup语法糖*/
<script name="app" setup>let a='bbb';
</script>
2、import组件自动注册,无需写到components中
/*原先*/
<template>
<about />
</template>
<script>
import about from './about.vue'
import { defineComponent } from "vue"
export default defineComponent({
name: 'home',
components: { about }setup(){}
})
</script>
/*用script-setup语法糖后*/
<template>
<about />
</template>
<script>
<script setup>
import about from './about.vue'
</script>
//组件的引入使用已不再需要components注册才能使用了,直接引入就可以在tamplate使用了,这个更改让代码看起来更舒服简介了一些
3、组件使用的变化,props用法defineProps
//原来
props: {title: {type: String,default: '',required: true,},},
//使用script-setup后
import {defineProps} from 'vue'
const props = defineProps({title: {type: String,default: '',required: true,},
})
4.emit用法变化defineEmits
//原来
emit:['h-update','h-delete']//使用script setup后
import { defineEmits } from 'vue'
const emit = defineEmits(['h-update', 'h-delete'])
5.attrs和slot用法变化
//原来
setup(props,context){const { attrs, slots, emit } = context// attrs 获取组件传递过来的属性值,// slots 组件内的插槽
}//使用script setup后
import { useContext } from 'vue'
const { slots, attrs } = useContext()
6.组件对外暴露属性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
})
</script>
7.使用自定义指令
全局注册的自定义指令将以符合预期的方式工作,且本地注册的指令可以直接在模板中使用,就像上文所提及的组件一样。
但这里有一个需要注意的限制:必须以 vNameOfDirective 的形式来命名本地自定义指令,以使得它们可以直接在模板中使用
<script setup>
const vMyDirective = {beforeMount: (el) => {// 在元素上做些操作}
}
</script>
<template><h1 v-my-directive>This is a Heading</h1>
</template>
<script setup>// 导入的指令同样能够工作,并且能够通过重命名来使其符合命名规范import { myDirective as vMyDirective } from './MyDirective.js'
</script>
导入指令:
<script setup>import { directive as clickOutside } from 'v-click-outside'
</script><template><div v-click-outside />
</template>
相关文章:
vue3 setup写不写到标签上的区别
在vue3种setup的写法,可以单独写setup()也可以写到script标签中,当然我们推荐后面这种 他的好处有很多,代码也简洁很多。1、属性和方法无需return,可直接使用 /*原先*/ <script> import { defineComponent } from "v…...
【论文解读】EdgeYOLO:一种边缘实时目标检测器(附论文地址)
论文地址:https://arxiv.org/pdf/2302.07483 这篇文章的标题是《EdgeYOLO: An Edge-Real-Time Object Detector》,由中国北京理工大学的Shihan Liu、Junlin Zha、Jian Sun、Zhuo Li和Gang Wang共同撰写。这篇论文提出了一个基于最新YOLO框架的高效、低复…...
xlwings,让excel飞起来!
excel已经成为必不可少的数据处理软件,几乎天天在用。python有很多支持操作excel的第三方库,xlwings是其中一个。 关于xlwings xlwings开源免费,能够非常方便的读写Excel文件中的数据,并且能够进行单元格格式的修改。 xlwings还…...
C语言学习,标准库 <stddef.h>
<stddef.h> C 标准库中头文件,它定义了一些常用的类型定义和宏。这些定义通常用于指针操作、数组处理和其他需要固定大小数据类型的场合。 size_t: 这是一个无符号整数类型,用于表示对象的大小(以字节为单位)。…...
PyQt5实战——操作台打印重定向,主界面以及stacklayout使用(四)
个人博客:苏三有春的博客 系类往期文章: PyQt5实战——多脚本集合包,前言与环境配置(一) PyQt5实战——多脚本集合包,UI以及工程布局(二) PyQt5实战——多脚本集合包,程序…...
React + Vite + TypeScript + React router项目搭建教程
一、创建项目 运行项目 二、目录结构 项目目录: ├─node_modules //第三方依赖 ├─public //静态资源(不参与打包) └─src├─assets //静态资源├─components //组件├─config //配置├─http //请求方法封装├─layout //页面…...
【ShuQiHere】️ 如何启用 SSH 服务
🛠️ 如何启用 SSH 服务 目录 基础概念 🌱检查是否已安装 SSH 服务 🔍在不同操作系统上安装 SSH 服务 💻 LinuxWindows 11macOS 启动和启用 SSH 服务 🚀配置防火墙以允许 SSH 连接 🔥配置 SSH 服务&#…...
【自动化测试】APP UI 自动化(安卓)-本地环境搭建
一、软件准备及版本介绍 软件版本JAVA-SDK1.8.0_181 python 3.10.10 Android SDK Tools 下最新版本即可,无特殊要求 PyCharm 2023.3.5(下最新版本即可,无特殊要求) 二、安装步骤及环境变量配置 2.1 Java安装及配置 1&am…...
java毕业设计之基于Bootstrap的常州地方旅游管理系统的设计与实现(springboot)
项目简介 基于Bootstrap的常州地方旅游管理系统的设计与实现有下功能: 基于Bootstrap的常州地方旅游管理系统的设计与实现的主要使用者分为用户功能模块和管理员功能模块两大部分,用户可查看景点信息、景点资讯等,注册登录后可进行景点订票…...
《机甲崛起》
第一章:觉醒 在遥远的未来,地球的面貌已被人类科技彻底改变。蓝天被高耸的摩天大楼和闪烁的飞行器撕裂,城市的光辉仿佛能照亮整个星球。然而,繁华背后隐藏着深重的危机:生态环境的恶化、资源的匮乏,已成为…...
Windows10:Linux Reader
Linux Reader Access files and folders on Ext, UFS, HFS, ReiserFS, or APFS file systems from Windows DiskInternals 发布的 Linux Reader 是一款能在 Windows 系统环境下读取 Linux 分区文件的免费软件,提供了资源管理器式的浏览模式。它使用只读模式挂载 L…...
一、k8s快速入门之学习Kubernetes组件基础
一、三个容器管理器平台 Apache MESOS 开源的分布式资源管理框架,被推特选为基础平台,2019年推特换位k8s,MESOS最新版可以在MESOS上管理k8sDOCKER SWARM docker总部发行的,实现docker的集群方案,和docker捆版一起&…...
PostgreSQL 到 PostgreSQL 数据迁移同步
简述 PostgreSQL 是一个历史悠久且广泛使用的数据库,不仅具备标准的关系型数据库能力,还具有相当不错的复杂 SQL 执行能力。用户常常会将 PostgreSQL 应用于在线事务型业务,以及部分数据分析工作,所以 PostgreSQL 到 PostgreSQL …...
RestTemplate 常用方法(提供了多种方法来发送 HTTP 请求)
RestTemplate 是 Spring 框架中用于同步客户端 HTTP 请求的一个类,它提供了多种方法来发送 HTTP 请求。以下是一些常用的 RestTemplate 方法及其代码案例: 1.postForObject() 该方法用于发送 POST 请求,并期望返回一个对象。以下是一个使用…...
常量和变量
常量 常量是指在程序中使用的一些具体的数、字符。在程序运行过程中,其值不能被更改。如123,145.88,m,TRUE等。常量,用于记录程序中不可更改的数据。 分类 1、整型常量,表示整数的常量。 表示形式: 1)十进制形…...
Go语言的使用
在安装Go和配置镜像时,可以根据操作系统和网络环境来选择适合的步骤。以下是详细的安装步骤和镜像配置: 1. 安装Go 1.1 通过官方下载 访问 Go的官方下载页面 下载适合操作系统的安装包(Windows、macOS 或 Linux)。安装包下载完…...
详解CRC校验原理以及FPGA实现
文章目录 一、什么是CRC校验?二、实现CRC校验原理以及步骤2.1 用多项式表示二元码数据2.2 选择一个生成多项式作为校验2.3 计算CRC校验码 三、CRC判断数据是否错误的原理以及步骤3.1 将收到的数据与生成多项式求余3.2 数据发生错误再进行CRC校验判断 四、FPGA实现CR…...
企业如何通过架构蓝图实现数字化转型
数字化转型的关键——架构蓝图的力量 在当今的商业世界,数字化转型已经不再是一个选择,而是企业生存与发展不可回避的战略行动。企业希望通过数字化提高效率、增强灵活性,并为客户提供更好的体验。然而,数字化转型不仅仅涉及技术…...
React第十三章(useTransition)
useTransition useTransition 是 React 18 中引入的一个 Hook,用于管理 UI 中的过渡状态,特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”状态,这样 React 可以优先处理更重要的更新,比如用户输入&#x…...
IDEA使用Maven Helper查看整个项目的jar冲突
在插件市场安装Maven Helper,安装好后,重启IDEA;双击打开可能存在jar冲突的pom文件;在右侧面板查看冲突,text是引入的依赖明细,点击Dependecy Analyzer选项卡即可查看冲突的jar。...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
vue3 daterange正则踩坑
<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...
数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)
名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 原创笔记:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 上一篇:《数据结构第4章 数组和广义表》…...
前端调试HTTP状态码
1xx(信息类状态码) 这类状态码表示临时响应,需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分,客户端应继续发送剩余部分。 2xx(成功类状态码) 表示请求已成功被服务器接收、理解并处…...
