vue常用业务场景

vue3:

使用本地存储

import { useStorage } from '@/hooks/web/useStorage'
const { getStorage, setStorage, removeStorage } = useStorage()setStorage("data", data); // 可为对象

使用pinia

(1)state: ({isDisableSwitch: false})
(2)
getters: 
getIsDisableSwitch(): boolean {return this.isDisableSwitch
}
(3)
actions:
setIsDisableSwitch(state: boolean): void {this.isDisableSwitch = state
}

父组件给子组件传递数据

(只传属性)
首先:
1、添加属性

<TemplateCard :templateId="template_Id" />

2、在子组件中添加,去使用

const props = defineProps({templateId: { type: Number, default: 0 } // 模板id
})

传方法

直接通过ref调用子组件的方法

<TemplateCard ref="templateCardRef" />

子组件给父组件传递数据

传方法

emit
1、子组件用

emit('query', data)

2、父组件获取数据

<TemplateCard @query="getData" />

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

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

相关文章

【无标题】Java_Se 数据变量与运算符

标识符、变量、常量、数据类型、运算符、基本数据类型的类型转换等。这些是编程中的“砖块”&#xff0c;是编程的基础。要想开始正式编程&#xff0c;还需要再学“控制语句”&#xff0c;控制语句就像“水泥”&#xff0c;可以把“砖块”粘到一起&#xff0c;最终形成“一座大…

华为OD机试 - 二维伞的雨滴效应(Python/JS/C/C++ 2024 E卷 200分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…

多模态AI技术详解:跨越数据边界的智能未来

1. 引言 在当今快速发展的人工智能&#xff08;AI&#xff09;领域&#xff0c;多模态AI技术正逐渐成为研究热点。它通过结合不同类型的数据&#xff08;如文本、图像、音频等&#xff09;&#xff0c;为机器提供更全面的理解能力。本文将深入探讨多模态AI的基本概念、应用场景…

ClickHouse-Kafka Engine 正确的使用方式

Kafka 是大数据领域非常流行的一款分布式消息中间件&#xff0c;是实时计算中必不可少的一环&#xff0c;同时一款 OLAP 系统能否对接 Kafka 也算是考量是否具备流批一体的衡量指标之一。ClickHouse 的 Kafka 表引擎能够直接与 Kafka 系统对接&#xff0c;进而订阅 Kafka 中的 …

PHP 数组排序类型介绍

在PHP中&#xff0c;数组排序是一项常见且重要的操作&#xff0c;它允许开发者根据一定的规则对数组中的元素进行排序。PHP提供了多种数组排序函数&#xff0c;以适应不同的排序需求。这些函数包括基本的升序和降序排序&#xff0c;以及基于特定键值、自定义排序逻辑等的复杂排…

镀金引线---

一、沉金和镀金 沉金和镀金都是常见的PCB金手指处理方式&#xff0c;它们各有优劣势&#xff0c;选择哪种方式取决于具体的应用需求和预算。 沉金&#xff08;ENIG&#xff09;是一种常用的金手指处理方式&#xff0c;它通过在金手指表面沉积一层金层来提高接触性能和耐腐蚀性…

【C++】模拟实现vector

在上篇中我们已经了解过的vector各种接口的功能使用&#xff0c;接下来我们就试着模拟实现一下吧&#xff01; 注意&#xff1a;我们在此实现的和C标准库中实现的有所不同&#xff0c;其目的主要是帮助大家大概理解底层原理。 我们模拟vector容器的大致框架是&#xff1a; t…

2024年【四川省安全员B证】新版试题及四川省安全员B证考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 四川省安全员B证新版试题参考答案及四川省安全员B证考试试题解析是安全生产模拟考试一点通题库老师及四川省安全员B证操作证已考过的学员汇总&#xff0c;相对有效帮助四川省安全员B证考试试卷学员顺利通过考试。 1、…

什么是注解?

1.是什么 注解&#xff08;Annotation&#xff09;是Java语言中一种元数据&#xff08;metadata&#xff09;的形式&#xff0c;它用于提供关于代码的额外信息&#xff0c;这些信息不会影响代码的编译或执行&#xff0c;但可以被工具用来进行编译时的检查或者在运行时进行处理。…

【webpack4系列】webpack基础用法(二)

文章目录 entryoutputloaderpluginmode前端构建基础配置关联HTML插件html-webpack-plugin构建 CSS 解析 ES6和React JSX解析 ES6解析 React JSX 解析CSS、Less和Sass解析CSS解析Less解析sass 解析图片和字体资源解析&#xff1a;解析图片资源解析&#xff1a;解析字体资源解析&…

Flutter 优化技巧分享

Flutter 作为一个跨平台框架&#xff0c;凭借其高效的开发体验和丰富的生态&#xff0c;受到越来越多开发者的青睐。然而&#xff0c;在开发过程中&#xff0c;随着项目的复杂度增加&#xff0c;性能问题和代码优化需求也逐渐显现。为了确保应用在各种场景下保持流畅的用户体验…

JS - 获取剪切板内容 Clipboard API

目录 1&#xff0c;需求最终效果 2&#xff0c;实现示例 3&#xff0c;注意点1&#xff0c;只支持安全上下文环境2&#xff0c;只能读取当前页面的剪切板3&#xff0c;权限获取问题4&#xff0c;获取内容的 MIME_TYPE 问题1&#xff0c;文本内容2&#xff0c;图片内容 5&#x…

魅思-视频管理系统 getOrderStatus SQL注入漏洞复现

0x01 产品简介 魅思-视频管理系统是一款集成了视频管理、用户管理、手机端应用封装等功能的综合性视频管理系统。该系统不仅以其强大的视频管理功能、灵活的用户管理机制、便捷的手机端应用封装功能以及高安全性和现代化的界面设计,成为了市场上备受关注的视频管理系统之一。…

【MySQL】使用C语言连接数据库

看到标题&#xff0c;可能会疑惑&#xff0c;我们学习的不是C吗&#xff0c;为什么使用C语言去连接数据库呢??实际上&#xff0c;这两种语言都可以连接数据库&#xff0c;但是C语言提供的API没有进行封装&#xff0c;更有利于我们学习数据库连接。面向API编程&#xff0c;哈哈…

一个基于 laravel 和 amis 开发的后台框架, 友好的组件使用体验,可轻松实现复杂页面(附源码)

前言 随着互联网应用的发展&#xff0c;后台管理系统的复杂度不断增加&#xff0c;对于开发者而言&#xff0c;既要系统的功能完备&#xff0c;又要追求开发效率的提升。然而&#xff0c;传统的开发方式往往会导致大量的重复劳动&#xff0c;尤其是在构建复杂的管理页面时。有…

Web植物管理系统-下位机部分

本节主要展示上位机部分&#xff0c;采用BSP编程&#xff0c;不附带BSP中各个头文件的说明&#xff0c;仅仅是对main逻辑进行解释 main.c 上下位机通信 通过串口通信&#xff0c;有两位数据验证头&#xff08;verify数组中保存对应的数据头 0xAA55) 通信格式 上位发送11字节…

SpringBoot:自定义异常

我们在实现自定义异常的时候&#xff0c;我们需要继承 RuntimeException &#xff0c;参考代码&#xff1a; /*** <b>Function: </b> todo** program: BizException* Package: com.kingbal.king.common.core.exception* author: dingcho* date: 2024/09/14* versi…

STL容器中的填充fill和generate

STL容器中的填充fill和generate &#x1f4a2;fill and fill_n&#x1f4a2;generate and generate_n 算法描述fill(beg, end, val)将val赋值给[beg, end)之间的所有元素fill_n(beg, n, val)将val赋值给[beg, begn)之间的所有元素generate(beg, end, func)连续调用func填充[beg…

大数据框架常用端口号总结

框架组件端口HadoopNameNode (HDFS)50070 (Hadoop 2.x) / 9870 (Hadoop 3.x)DataNode (HDFS)50075 (Hadoop 2.x) / 9864 (Hadoop 3.x)ResourceManager (YARN)8088, 8032NodeManager (YARN)8042, 8040HBaseHMaster16010, 16000RegionServer16030, 16020Zookeeper2181HiveHiveSer…

QT串口发送数据的一个问题

一.问题与解决 1.问题&#xff1a; 在做串口发送固件升级数据的时候&#xff0c;总是莫名提示错误&#xff1a; QObject::startTimer: Timers cannot be started from another thread QObject::startTimer: Timers cannot be started from another thread QObject::startTi…