当前位置: 首页 > 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不知道怎么翻译&#…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...