当前位置: 首页 > news >正文

vue自定义事件传递数据

页面应用一个组件,采用自定义事件来传递参数

$emit是Vue实例的一个方法,它用于触发自定义事件。这些事件可以被父组件监听到,从而实现子组件向父组件的通信。

这种方法的好处在于,它可以让数据的流动保持单向,有助于维护组件之间的清晰界限。$emit()方法有两个参数,第一个参数代表触发事件的名称,第二个参数代表跟随事件要发送的数据。

this.$emit('event-name', payload)

子组件代码:

1、绑定事件

2、在方法中进行数据发送

<template><button @click="refreshHandle">刷新</button>
</template><script>
export default {name: "RefreshBtn",data() {return {target: 1}},methods: {refreshHandle() {this.$emit("onFreshEvent",this.target);this.target += 1;}}
}
</script>

父组件代码:

父组件想要拿到数据,需要监听子组件中自定义的事件,在事件方法中拿到数据进行操作。

<template><ol><li><router-link to="/newsDetails">百度新闻</router-link><router-link to="/newsDetails">网易新闻</router-link><router-link to="/newsDetails">头条新闻</router-link></li></ol><RefreshBtn @onFreshEvent="getData"/><p>{{newsRefresh}}</p>
</template><script>
import RefreshBtn from "../components/RefreshBtn.vue"
export default {name: "News",data() {return {newsRefresh: ""}},components: {RefreshBtn},methods: {getData(target) {target === 1 ? this.newsRefresh = "第一次刷新" : this.newsRefresh = "不是第一次刷新"}}
}
</script>

相关文章:

vue自定义事件传递数据

页面应用一个组件&#xff0c;采用自定义事件来传递参数 $emit是Vue实例的一个方法&#xff0c;它用于触发自定义事件。这些事件可以被父组件监听到&#xff0c;从而实现子组件向父组件的通信。 这种方法的好处在于&#xff0c;它可以让数据的流动保持单向&#xff0c;有助于…...

TensorBoard 安装与启动

安装&#xff1a;pip install tensorboard启动&#xff1a;tensorboard --logdir<events_directory_name> events_directory_name 为运行 tensorboard 后&#xff0c;产生的 events 文件所在的路径 博客参考&#xff1a;TensorBoard最全使用教程...

云计算运维工程师的突发状况处理

云计算运维工程师在应对突发的故障和紧急情况时,需要采取一系列迅速而有效的措施来最小化服务中断的时间并恢复系统的稳定性。 以下是一些关键步骤和策略: 快速响应: 立即识别并确认故障的性质和范围。通知团队成员和相关的利益相关者,确保所有人了解当前情况。故障诊断:…...

【CSS in Depth 2 精译】1.6 本章小结

1.6 本章小结 浏览器遵循层叠规则来确定哪些样式在哪些元素上生效&#xff1b;选择器优先级由选择器中的 id 数、class 类的个数以及标签名的个数来共同确定。优先级更高的声明将覆盖较低声明&#xff1b;当某些属性没有层叠值时&#xff0c;它们会从父元素继承一个样式值。这…...

FFmpeg源码:ff_h2645_extract_rbsp函数分析

一、ff_h2645_extract_rbsp函数的声明 ff_h2645_extract_rbsp函数的声明放在FFmpeg源码&#xff08;本文演示用的FFmpeg源码版本为5.0.3&#xff0c;该ffmpeg在CentOS 7.5上通过10.2.1版本的gcc编译&#xff09;的头文件libavcodec/h2645_parse.h中。 /*** Extract the raw (u…...

关于 AD21导入电子元器件放置“3D体”STEP模型失去3D纹理贴图 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139969415 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

【JAVA】利用Redisson和Spring实现高效物联温度控制链路,确保温度调节的准确性和效率,定时链路执行使用案例,一环扣一环

主要功能和场景 柔性调温策略&#xff1a;这个类主要用于管理一个温度调节流程&#xff0c;通过不同的策略&#xff08;如策略1和策略2&#xff09;来调节温度&#xff0c;确保设备或环境中的温度达到预设的目标。 紧急停止机制&#xff1a;在流程执行过程中&#xff0c;如果需…...

yolov8部署资料

1.labelImg安装&#xff1a; labelImg的安装过程可以参照以下步骤进行&#xff0c;这里以Windows操作系统为例&#xff1a; 1. 检查Python环境 首先&#xff0c;需要确认你的电脑上是否已经安装了Python。你可以通过Win R打开windows“运行”对话框&#xff0c;输入cmd&#x…...

迅为RK3588开发板支持LVDS信号,标准 HDMI信号,IMIPI信号

性能强--iTOP-3588开发板采用瑞芯微RK3588处理器&#xff0c;是全新一代ALoT高端应用芯片&#xff0c;采用8nm LP制程&#xff0c;搭载八核64位CPU&#xff0c;四核Cortex-A76和四核Cortex-A55架构&#xff0c;主频高达2.4GHZ&#xff0c;8GB内存&#xff0c;32GB EMMC。 四核心…...

页面开发感想

页面开发 1、 前端预览 2、一些思路 2.1、首页自定义element-plus的走马灯 :deep(.el-carousel__arrow){border-radius: 0%;height: 10vh; }需要使用:deep(标签)才能修改样式 或者 ::v-deep 标签 2.2、整体设计思路 <template><div class"card" style&…...

TikTok达人合作ROI分析:品牌如何评估带货效果

在当今的数字营销时代&#xff0c;TikTok已经成为品牌推广和消费者互动的重要平台。通过与TikTok达人的合作&#xff0c;品牌可以有效地提升其市场影响力和销售额。其中&#xff0c;评估这些合作的投入产出比&#xff08;ROI&#xff09;对于品牌来说是至关重要的。本文Nox聚星…...

硬件实用技巧:电容精度和常用容值表

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140009042 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

Java面试题:内存管理、类加载机制、对象生命周期及性能优化

1. 说一下 JVM 的主要组成部分及其作用? JVM包含两个子系统和两个组件:Class loader(类装载)、Execution engine(执行引擎)、Runtime data area(运行时数据区)、Native Interface(本地接口)。 Class loader(类装载):根据给定的全限定名类名(如:java.lang.Object)装载class文…...

什么是 Payment Request API?

Payment Request API 是一个 Web API&#xff0c;允许网页和 Web 应用程序向用户展示一个标准化的支付界面&#xff0c;以便用户快速、方便地进行付款。这种 API 的设计目的是为了简化用户支付过程&#xff0c;提高支付转化率&#xff0c;并提供一种更加统一的支付体验。 支持…...

【杂记-浅谈EBGP外部边界网关协议、IBGP内部边界网关协议】

一、EBGP概述 EBGP&#xff0c;External Border Gateway Protocol&#xff0c;即外部边界网关协议&#xff0c;EBGP主要用于在不同自治系统&#xff08;AS&#xff09;之间交换路由信息&#xff0c;每个AS都有一个独特的AS号码&#xff0c;用于区分不同的自治系统。EBGP通过AS…...

基于Java的宠物领养管理系统【附源码】

摘 要 近些年来&#xff0c;随着科技的飞速发展&#xff0c;互联网的普及逐渐延伸到各行各业中&#xff0c;给人们生活带来了十分的便利&#xff0c;宠物管理系统利用计算机网络实现信息化管理&#xff0c;使整个宠物领养的发展和服务水平有显著提升。 本文拟采用IDEA开发工具…...

Grafana 对接 Zabbix 数据源API错误

介绍 主要报错为 Invalid params. Invalid parameter "/": unexpected parameter "user". 主要原因为Zabbix 6.4.0以上的版本更新了API&#xff0c;导致Grafana的数据源插件不兼容。 解决方案 更新到最新的Grafana 和 grafana-zabbix 插件即可。&#x…...

Spring Boot与Apache Kafka的深度集成

Spring Boot与Apache Kafka的深度集成 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot应用中实现与Apache Kafka的深度集成&am…...

07 Pytoch Module

1.继承nn.Module 2.class A (B) 进入到 super_init() 3.进入construct&#xff08;&#xff09; 初始化参数 同时判断是否为train 4.跳出来&#xff1a;进入了 forward 中 5.子模块的构建 nn.Module总结 一个module可以包含多个子module 一个module相当于一个运算,必须实现…...

Isaac Sim 9 物理(1)

使用Python USD API 来实现 Physics 。 以下内容中&#xff0c;大部分 Python 代码可以在 Physics Python 演示脚本文件中找到&#xff0c;本文仅作为个人学习笔记。 一.设置 USD Stage 和物理场景 Setting up a USD Stage and a Physics Scene USD Stage不知道怎么翻译&#…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...