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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465324.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于YOLO11/v10/v8/v5深度学习的老鼠智能检测系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

机器学习—前向传播的一般实现

可以写一个函数来实现一个密集的层&#xff0c;那是神经网络的单层&#xff0c;所以定义稠密函数&#xff0c;它将上一层的激活作为输入以及给定层神经元的参数w和b。看下边图片所展示的例子&#xff0c;把所有这些权重向量堆叠成一个矩阵&#xff0c;wnp.array([[1,-3,5][2,4,…

高清烟花视频素材下载网站推荐

无论是庆祝节日、婚礼&#xff0c;还是各种欢庆活动&#xff0c;烟花总能瞬间点燃气氛&#xff0c;带来视觉上的震撼。在视频作品中加入绚丽的烟花瞬间&#xff0c;能够立刻提升画面的冲击力和节庆氛围。那么&#xff0c;高清烟花视频素材去哪下载呢&#xff1f;今天&#xff0…

Java异常体系结构

在Java编程中&#xff0c;异常处理是一个重要的概念。理解Java的异常体系结构以及如何捕获和处理异常&#xff0c;对于编写健壮的程序至关重要。本文将详细介绍Java异常体系结构的组成部分&#xff0c;以及异常的捕获和处理机制。 一、Java异常体系结构 Java的异常体系结构可以…

免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏

文末查看开源项目地址 Light Chaser 是一款国产开源免费的基于 React18、Vite5、TypeScript5 技术栈实现的 Web 可视化大屏设计工具&#xff0c;支持Docker方式部署&#xff0c;支持MySQL、PostgreSQL、SQL Server、Oracle 数据源。 你可以简单快速地搭建数据可视化展示、数据报…

【解决】Pico 串流 Unity 开发环境 Preview 黑屏问题

开发平台&#xff1a;Unity 6.0 开发工具&#xff1a;Pico SDK   一、问题描述 在 Unity 开发环境下运行 测试 PicoVR 表现时&#xff0c;出现 Game视窗 PicoVR投屏 呈现黑屏效果。详细背景如下&#xff1a; UnitySwitch PlateformPICO Integration SDKPICO Live Preview6…

pytest高版本兼容test_data[“log“] = _handle_ansi(“\n“.join(logs))错误

一、问题现象&#xff1a; 执行seleniumpytest结束时报: INTERNALERROR> File "D:\workspace\pytestframe\.venv\Lib\site-packages\pytest_html\report_data.py", line 141, in add_test INTERNALERROR> test_data["log"] _handle_ansi(&q…

编译工具与文件学习(一)-YAML、repos、vcstoolcolcon

YAML YAML&#xff08;YAML Ain’t Markup Language&#xff09;是一种人类可读的数据序列化格式&#xff0c;常用于配置文件、数据交换和存储结构化数据。YAML 的设计目标是简洁、易读&#xff0c;并且能够表示复杂的数据结构。 YAML 文件的基本语法 基本结构&#xff1a; Y…

信息学科平台系统构建:Spring Boot框架深度解析

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

从传统服务器到虚拟化:虚拟机 VM 如何改变计算游戏规则?

目录 VMware 数据中心虚拟化入门Ⅰ—— 虚拟机 Virtual Machine&#xff08;VM&#xff09;1. 虚拟机 Virtual Machine, VM阅读本文后可以获得以下信息1.1 什么是虚拟机问题思考&#xff08;1&#xff09;从传统服务器到虚拟化服务器&#xff08;2&#xff09;问题&#xff1a;…

双向链表及如何使用GLib的GList实现双向链表

双向链表是一种比单向链表更为灵活的数据结构&#xff0c;与单向链表相比可以有更多的应用场景&#xff0c;本文讨论双向链表的基本概念及实现方法&#xff0c;并着重介绍使用GLib的GList实现单向链表的方法及步骤&#xff0c;本文给出了多个实际范例源代码&#xff0c;旨在帮助…

MySQL 数据库之库操作

文章目录 1. 什么是数据库2. 基础概念2.1 连接数据库2.2 服务器&#xff0c;数据库&#xff0c;表关系2.3 SQL分类 3. 库的操作3.1 创建&#xff0c;选择&#xff0c;查看数据库3.2 字符集和默认校验规则 3.3 操纵数据库3.3.1 数据库查看3.3.2 数据库删除3.3.3 数据库修改 4. 其…

Windows安装多个NodeJS版本

下载nvm管理工具&#xff0c;下载完成解压安装 https://github.com/coreybutler/nvm-windows/releases 选择nvm安装位置 选择nvm安装node版本的安装位置 如果提示你已经安装的有nodejs&#xff0c;提示你是否通过nvm管理nodejs&#xff0c;选择是&#xff0c;继续安装即可…

使用NVM自由切换nodejs版本

一、NVM介绍 在日常开发中&#xff0c;我们可能需要同时进行多个不同NodeJS版本的项目开发&#xff0c;每个项目所依赖的nodejs版本可能不一致&#xff0c;我们如果只安装一个版本的nodejs&#xff0c;就可能出现node版本冲突问题&#xff0c;导致项目无法启动。这种情况下&am…

parseInt 是一个内置的 JavaScript 函数,用于将字符串转换为整数。

parseInt(options.checkNumber, 10) 中的 10 表示将字符串转换为十进制整数。 解释 parseInt 函数&#xff1a; parseInt 是一个内置的 JavaScript 函数&#xff0c;用于将字符串转换为整数。它有两个参数&#xff1a; 第一个参数是要转换的字符串。第二个参数是转换时使用的基…

Qt中的Model与View 4:QStandardItemModel与QTableView

目录 QStandardItemModel API QTableView 导航 视觉外观 坐标系统 API 样例&#xff1a;解析一个表格txt文件 QStandardItemModel QStandardItemModel 可用作标准 Qt 数据类型的存储库。它是模型/视图类之一&#xff0c;是 Qt 模型/视图框架的一部分。它提供了一种基于…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十九集:制作过场Cutscene系统

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作过场Cutscene系统 1.制作基本的视频过场和动画过场2.制作决定过场系统的播放顺序Sequence以及切换场景以后的逻辑处理二、制作跳过过场Cutscene的MenuS…

【设计模式系列】桥接模式(十三)

一、什么是桥接模式 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;其核心目的是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式主要用于处理那些在设计时无法确定实现细节的场合&#xff0c;或者需要在多个实现之间…

基于Multisim光控夜灯LED电路(含仿真和报告)

【全套资料.zip】光控夜灯LED电路设计Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 光控夜灯LED电路 1.采用纯数字电路&#xff0c;非单片机。 2.通过检测周围光线&#xff0c;光线暗自…

html练习2

实现下列图片的效果 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>* {margin: 0;padding: 0;}#menu {background-color: #0c0048;width: 100%;height: 50px;margin: auto;…