Vue中<script setup></script>的主要语法元素和特性

<script setup>是 Vue 3 中引入的一种新的组件内脚本语法糖,它带来了更简洁、高效的组件逻辑编写方式。

以下是 <script setup> 的主要语法元素和特性:

1.导入和使用

  • 直接在 <script setup> 中导入依赖,不需要在 componentsdirectives 等选项中声明。
  • 导入的组件和指令可以直接在模板中使用。

2.响应式数据:

  • 使用 ref 和 reactive 来创建响应式的数据。
  • ref 用于基本类型,reactive 用于对象。
  • 示例:
import { ref, reactive } from 'vue'const count = ref(0)
const state = reactive({ message: 'Hello World' })

3.计算属性:

  • 使用 computed 来定义计算属性。
  • 示例:
import { computed } from 'vue'const reversedMessage = computed(() => state.message.split('').reverse().join(''))

4.侦听器:

  • 使用 watch 和 watchEffect 来监听数据的变化。
  • 示例:
import { watch, watchEffect } from 'vue'watch(count, (newVal, oldVal) => {console.log(`count changed from ${oldVal} to ${newVal}`)
})watchEffect(() => {console.log(`current count value is: ${count.value}`)
})

5.生命周期钩子:

  • 可以直接在 <script setup> 中使用生命周期钩子,如 onMountedonUnmounted,onBeforeUpdateonUpdatedonBeforeUnmount 和 onUnmounted  等等。
  • 示例:
import { onMounted, onUnmounted } from 'vue'onMounted(() => {console.log('Component mounted')
})onUnmounted(() => {console.log('Component unmounted')
})

6.Props 解构:

  • 使用defineProps编译宏来定义组件接收的属性,它接收一个对象或者基于类型的声明。
  • 在组件使用时就能接收外部传入的对应属性值了,并且在模板中可以像使用普通变量一样使用props中的属性。
  • 使用 defineProps 接收父组件传递的 props。
  • 示例:
<template><div>{{ title }}</div>
</template><script setup>
// 基于对象的方式定义props
const props = defineProps({title: String
})
// 基于类型的方式(如果使用TypeScript)
// const props = defineProps<{ title: string }>()
</script>

7.事件处理:

  • 使用defineEmits编译宏来声明组件向外触发的自定义事件。
  • 示例:
<template><button @click="emitCustomEvent">触发事件</button>
</template><script setup>
const emits = defineEmits(['custom-event'])
const emitCustomEvent = () => {emits('custom-event', '传递的数据')
}
</script>

8. 默认导出:

       不再需要 export default,因为所有顶层绑定会自动暴露给模板。

9.解构 Props 和 Emits:

  • 直接解构 props 和 emit 而无需担心失去响应性。
  • 示例
const { title, isActive } = defineProps(['title', 'isActive'])
const emit = defineEmits(['update:title'])

10.访问父组件和根实例属性(有限制)

  • <script setup>中访问父组件或根实例的属性不像传统的this.$parentthis.$root那样方便,不过可以通过getCurrentInstance函数(但官方不建议过度依赖此方式用于普通场景,主要用于一些高级的、框架层面的扩展等情况)来获取组件实例相关信息。
  • 例如:
<script setup>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
// 可以通过instance来访问一些实例相关信息,不过要谨慎使用
</script>

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

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

相关文章

etcd+京东hotkey探测使用

qhotKey链接 京东hotkey把热点数据默认缓存在了本地缓存caffeine中&#xff0c;也可以存到redis中&#xff0c;但是京东hotkey的SDK没有redis的实现方法&#xff0c;因此需要自己实现。 官方目录结构下&#xff1a;分别是client客户端&#xff08;要打包引入到自己的项目&…

如何实现层叠布局

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了GirdView Widget,本章回中将介绍Stack这种Widget,闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 在Flutter中Stack主要用来叠加显示其它的Widget,类似我们日常生活中的楼层或者说PS中的图层,因此它也是一…

Java 上机实践11(组件及事件处理)

&#xff08;大家好&#xff0c;今天分享的是Java的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 Plug&#xff1a;程序实现 方法一&#xff08;记事本&#xff09; 方法二&#xff08;IDEA&#xff09; 实验一&am…

本地如何启动casdoor

1、下载代码 GitHub - casdoor/casdoor at v1.777.0 下载对应tag的代码&#xff0c;我这里选择的时v1.777.0版本 通过网盘分享的文件&#xff1a;casdoor-1.777.0.zip 链接: https://pan.baidu.com/s/1fPNqyJYeyfZnem_LtEc0hw 提取码: avpd 2、启动后端 1、使用goland编译…

CSDN外链失效3:

参考我之前的博客&#xff1a; 外链失效博客1&#xff1a;随想笔记1&#xff1a;CSDN写博客经常崩溃&#xff0c;遇到外链图片转存失败怎么办_csdn外链图片转存失败-CSDN博客 外链失效博客2&#xff1a;网络随想2&#xff1a;转语雀_md格式转语雀lake格式-CSDN博客 markdown…

Kubernates

kubernates是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;Kubernetes的目标是让部署容器化的应用简单并且高效&#xff08;powerful&#xff09;,Kubernetes提供了应用部署&#xff0c;规划&#xff0c;更新&#xff0c;维护的一种机制。 架构…

Pycharm 更改字体大小

更改代码字体的大小 更改软件字体的大小

Ubuntu20.04解决docker安装后is the docker daemon running? 问题

Ubuntu20.04解决docker安装后is the docker daemon running? 问题 问题描述问题分析问题解决 问题描述 docker info后报错 ERROR: Cannot connect to the Docker daemon at unix:///root/.docker/desktop/docker.sock. Is the docker daemon running? errors pretty printi…

四、使用langchain搭建RAG:金融问答机器人--构建web应用,问答链,带记忆功能

经过前面3节完成金融问答机器人基本流程&#xff0c;这章将使用Gradio构建web应用&#xff0c;同时加入memory令提示模板带有记忆的&#xff0c;使用LCEL构建问答链。 加载向量数据库 from langchain.vectorstores import Chroma from langchain_huggingface import HuggingF…

深度学习之超分辨率算法——SRCNN

网络为基础卷积层 tensorflow 1.14 scipy 1.2.1 numpy 1.16 大概意思就是针对数据&#xff0c;我们先把图片按缩小因子照整数倍进行缩减为小图片&#xff0c;再针对小图片进行插值算法&#xff0c;获得还原后的低分辨率的图片作为标签。 main.py 配置文件 from model im…

基于海思soc的智能产品开发(mcu读保护的设置)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于市场上的产品&#xff0c;除了电路之外&#xff0c;软件保护也是非常重要的一个环节。要是自己辛辛苦苦写的软件&#xff0c;被竞争对手轻易地…

Zabbix6.0升级为6.4

为了体验一些新的功能&#xff0c;比如 Webhook 和问题抑制等&#xff0c;升级个小版本。 一、环境信息 1. 版本要求 一定要事先查看官方文档&#xff0c;确认组件要求的版本&#xff0c;否则版本过高或者过低都会出现问题。 2. 升级前后信息 环境升级前升级后操作系统CentOS…

GitLab的卸载与重装

目录 一、GitLab的卸载 二、 GitLab的安装与配置 1. 创建安装目录 2. 安装 3. 使用 3.1 初始化 3.2 创建空白项目 ​编辑 3.3 配置SSH 3.3.1 配置公钥 ​编辑 3.3.2 配置私钥 3.4 配置本地git库 一、GitLab的卸载 1. 停止gitlab sudo gitlab-ctl stop 2. 卸载…

Linux快速入门-Linux的常用命令

Linux的常用命令 1. Linux的终端与工作区1.1 终端概述1.2 切换终端 2. Shell语言解释器2.1 Shell概述 3. 用户登录与身份切换3.1 su 命令3.2 sudo 命令 4. 文件、目录操作命令4.1 pwd 命令4.2 cd 命令4.3 ls 命令4.3.1 ls 指令叠加使用 4.4 mkdir 命令4.5 rmdir 命令4.6 cp 命令…

三、ubuntu18.04安装docker

1.使用默认ubuntu存储库安装docker 更新软件存储库 更新本地软件数据库确保可以访问最新版本。打开终端输入&#xff1a;sudo apt-get update 卸载旧版本的docker 建议继续之前卸载任何旧的docker软件。打开终端输入&#xff1a;sudo apt-get remove docker docker-engine …

【Linux系统编程】:信号(2)——信号的产生

1.前言 我们会讲解五种信号产生的方式: 通过终端按键产生信号&#xff0c;比如键盘上的CtrlC。kill命令。本质上是调用kill()调用函数接口产生信号硬件异常产生信号软件条件产生信号 前两种在前一篇文章中做了介绍&#xff0c;本文介绍下面三种. 2. 调用函数产生信号 2.1 k…

专业电脑数据恢复软件 iFind Data Recovery v9.2.3 绿色便携版

前言 iFinD Data Recovery一款特别实用的数据找回工具&#xff0c;它很厉害&#xff0c;能帮你在SSD硬盘和Windows10系统上找回丢失的数据。而且&#xff0c;它还能深度扫描并恢复各种主流数码相机里的RAW格式照片&#xff0c;速度超快&#xff0c;用起来也很稳定顺畅&#xf…

QT:Widgets中的数据库应用

SQL数据库驱动 pro文件中添加如下一行代码 QT sql widgetsmain.cpp #include <QApplication> #include <QSqlDatabase> #include <QStringList> int main(int argc, char *argv[]) {QApplication a(argc, argv);qDebug() << "Available driver…

AI的进阶之路:从机器学习到深度学习的演变(三)

&#xff08;承接上集&#xff1a;AI的进阶之路&#xff1a;从机器学习到深度学习的演变&#xff08;二&#xff09;&#xff09; 四、深度学习&#xff08;DL&#xff09;&#xff1a;机器学习的革命性突破 深度学习&#xff08;DL&#xff09;作为机器学习的一个重要分支&am…

数据集-目标检测系列 车牌检测识别 数据集 CCPD2019

车牌检测&识别 数据集 CCPD2019 DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” 贵在坚持&#xff01; 数据样…