vue中怎么自定义组件
目录
一:功能描述
二:实现过程
一:功能描述
在开发过程中我们经常需要自定义组件完成特定的功能,比如用户详情页,我增加一个调整余额的按钮,点击以后需要打开一个调整余额对话框,输入调整的金额大小,完成以后关闭弹框同时刷新页面,要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件,包含一个调整按钮,点击按钮就打开这个对话框,里面利用watch监听用户的余额和用户id等信息,同时使用watch回调实时更新余额信息等。
二:实现过程
首先定义弹框组件
export default class LsUserChange extends Vue {
定义三个变量:
@Prop() value?: number @Prop() type?: number // 变动类型:1-用户金额 @Prop() userId?: number // 用户id
监听变量,并回调函数赋值
@Watch('userId', {immediate: true
})
getuserId(val: any) {// 初始值//this.form.value = valthis.$set(this.form, 'user_id', val)
}@Watch('value', {immediate: true
})
getValue(val: any) {// 初始值//this.form.value = valthis.$set(this.form, 'value', val)
}@Watch('type', {immediate: true
})
getType(val: any) {// 变动类型:1-用户金额;if (val == 1) {this.typeName = '金额'this.$set(this.form, 'type', val)}
}
2:调整按钮和调用组件
引用组件:
import LsUserChange from '@/components/user/ls-user-change.vue'
<ls-user-changetitle="余额调整":value="user_info.user_redpacket":type="1":userId="user_id"@refresh="userDetail" ><el-button type="text" slot="trigger" size="small" :disabled="user_info.user_delete">调整</el-button> </ls-user-change>
这里的refresh后的方法组件刷新的方法,可以在调整完余额后刷新用户最新余额信息
userDetail() {apiUserDetail({user_id: this.user_id}).then((res: any) => {this.user_info = res.user_infothis.transaction = res.transaction}).catch((res: any) => {})
}
3:在余额弹框离调整完余额要调用刷新方法
this.$emit('refresh')

相关文章:
vue中怎么自定义组件
目录 一:功能描述 二:实现过程 一:功能描述 在开发过程中我们经常需要自定义组件完成特定的功能,比如用户详情页,我增加一个调整余额的按钮,点击以后需要打开一个调整余额对话框,输入调整的金…...
BM1反转链表[栈+头插法]
题目要求如下: 问题比较简单,就是将链表中的值进行反转即可。 一种比较简单的方式是使用栈链表的方式来实现,下面是相应的代码: #include <stdio.h> #include <stdlib.h> int arr[10001] {0}; struct ListNode* ReverseList(struct ListNode* head ) {if (head …...
VisionPro二次开发学习笔记10-使用 PMAlign和Fixture固定Blob工具检测孔
使用 PMAlign和Fixture固定Blob工具检测孔 这个示例演示了如何使用 PMAlign 工具和 Fixture 工具来夹持一个 Blob 工具。示例代码将检测支架右上角孔的存在。当点击运行按钮时,将读取新图像。PMAlign 工具运行并生成一个 POSE 作为输出。POSE 是一个六自由度的变换…...
学单片机怎么在3-5个月内找到工作?
每个初学者,都如履薄冰,10几年前,我自学单片机时,也一样。 想通过学习,找一份体面点的工作,又害怕辛辛苦苦学出来,找不到工作。 好在,当初执行力,还算可以,自…...
探索设计模式:观察者模式
探索设计模式:观察者模式 🧐观察者模式简介:gem:核心概念:rainbow:观察者模式的优点:truck:实现步骤1. 定义主题接口2. 实现观察者接口3. 具体主题实现4. 具体观察者实现5. 调用 :triangular_flag_on_post:总结 在实际开发过程中,设计模式的作…...
gradio之持续输入,持续输出(流式)
流式输出yield,比如一个输出控件,想要实时显示内容,用return for循环一次就返回去了。而用yield会持续更新往下执行 for i in range(length):time.sleep(8)yield 总共str(length)条语料,已运行str(i1)条 在Gradio中,某些组件&am…...
Git 常用命令指南:从入门到精通
文章目录 前言1. 初始化一个Git仓库2. 克隆远程仓库3. 查看仓库状态4. 添加文件到暂存区5. 提交代码6. 推送到远程仓库7. 拉取远程仓库的更改8. 分支管理9. 查看提交历史10. 回退到某个版本结语 前言 如果你是一位开发者或者对代码感兴趣,那么你一定听说过Git。Git…...
Camera驱动 汇总表【小驰行动派】
在做Camera BringUp的时候,如果有已经点亮过的驱动源码,对我们的帮助将会非常的大,可以大大加快我们点亮进度。 所以我决定整理汇总接触过得Camera驱动信息。如果你刚好有需要,可以加我薇咨询(该资料整理比较花时间&a…...
SSRS rdlc报表 九 在.net core中使用RDLC报表
开发环境 vs 2022企业版 SqlServer数据库 Win11 前言 rdlc报表在aspx中集成的很好,很容易实现,并且功能强大,但随着技术的发展,aspx慢慢的被淘汰,现在已经发展到.net8了,aspx基本上很少用,出的新框架基本上也都是前后端分离,没了aspx的控件加持,rdlc这么厉害的报…...
力扣(2024.08.10)
1. 222:完全二叉树的节点个数 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def countNodes(…...
Django-文件上传
## Django文件上传需要考虑的重要事项 > 文件或图片一般通过表单进行。用户在前端点击文件上传,然后以POST方式将数据和文件提交到服务器。服务器在接收到POST请求后需要将其存储在服务器上的某个地方。Django默认的存储地址是相对于根目录的/media/文件夹&…...
[Meachines] [Easy] valentine SSL心脏滴血+SSH-RSA解密+trp00f自动化权限提升+Tmux进程劫持权限提升
信息收集 IP AddressOpening Ports10.10.10.79TCP:22,80,443 $ nmap 10.10.10.79 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 5.9p1 Debian 5ubuntu1.10 (Ubuntu Linux; protocol 2.0) | ssh-hostkey: | 1024 96:4c:51:42:…...
利用单张/多张图内参数标定 OpenCV Python
E:\OpenCV_py_ws\opencv相机标定\图片\calib-JT.py #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2023/11/21 16:05 # @File : calib.py # @Software: import cv2 import numpy as np import glob from datetime import datetimenp.set_printoptions(supp…...
The Llama 3 Herd of Models 第7部分视觉实验部分全文
第1,2,3部分,介绍、概览和预训练 第4部分,后训练 第5部分,结果 第6部分,推理 7 Vision Experiments 我们进行了一系列的实验,在这些实验中,我们通过一种由两个主要阶段组成的合成方法将视觉识别能力整合到Llama 3中。首先,我们通过在大量图像-文本对上引入和训练两种…...
亚信安慧AntDB-T:使用Brin索引提升OLAP查询性能以及节省磁盘空间
前 言 在这个信息量爆炸的时代,数据库面临着海量数据的挑战,如何提升OLAP业务的查询性能、如何节省磁盘空间等问题已经成为了数据库的痛点之所在。本篇着重介绍亚信安慧AntDB-T中Brin索引的实现过程以及应用在OLAP业务中带来的性能提升和存储降低。 亚…...
web渗透测试常用命令
Web Application TTPs HPING3 DoS hping3 targetiP --flood --frag --spoof ip --destport # --synHydra Online Brute Force hydra -1 ftp -P words -v targetiP ftpDownload HTTP File and Execute...
Kylin系列(二)使用
接上一章《Kylin系列(一)入门》 1. Kylin使用 1.1. 数据准备 1.1.1. 数据导入 在使用Apache Kylin时,数据导入是一个非常重要的环节,因为它直接影响到Kylin的性能、稳定性和易用性。以下是关于Apache Kylin数据导入的一些详细介绍: 导入数据的准备 在开始导入数据之前…...
CI/CD——CI持续集成实验
目录 一. 安装Docker 二. 部署Jenkins 三. 配置邮箱 四. Harbor部署 五. Nexus Repository部署 五. sonarqube安装 六. 配置Docker 七. jenkins系统配置sonarqube 八. 配置pipeline 九. 构建并集成 一. 安装Docker docker-ce镜像_docker-ce下载地址_docker-ce安装教程…...
2.4 大模型数据基础:预训练阶段数据详解 ——《带你自学大语言模型》系列
本系列目录 《带你自学大语言模型》系列部分目录及计划,完整版目录见:带你自学大语言模型系列 —— 前言 第一部分 走进大语言模型(科普向) 第一章 走进大语言模型 1.1 从图灵机到GPT,人工智能经历了什么…...
Kali Linux——网络安全的瑞士军刀
一、引言 在网络安全的领域中,Kali Linux 宛如一把强大而全能的瑞士军刀,为安全研究人员和专业人士提供了丰富的工具和资源。本文将深入探讨 Kali Linux 的特点、优势、常用工具以及实际应用场景,带您领略这一强大操作系统的魅力。 二、Kal…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
