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

【前端】在Vue页面中引入其它vue页面 数据传输 相互调用方法等

主页面  home

从页面 headView

需求

        在 home.vue 中引用 headView.Vue

方案:

home.vue 代码:

只需要在home.vue 想要的地方添加  <headView></headView>

<script>//聊天页面
import headView '@/view/headView.vue'
export default {components: {headView},

页面之间进行传参

从页面 headView

注册组件,定义字段

注意这里的lastData不用在data里面初始化

export default {name: "detail",props: {lastData: {type: Object,required: false,},},

设置监听,获取数据

 watch: {lastData: {handler(newName, oldName) {console.log("监听");console.log(this.lastData);if (this.lastData != null) {this.getList();} else {this.detailList = [];this.isAdd = true;}},deep: true,}

主页面 home.vue

引入从页面headView

import headView '@/view/headView.vue'
export default {components: {headView   //和上面引入名称保持一致},
<div class="right">//这里的lastData为"发送数据字段"<headView :lastData="lastData"></headView>
</div>

定义发送字段初始值

data() {return {//要注意和从页面定义的类型保持一致lastData: {}
}

根据事件发送数据

 //获取单选框数据,赋值给"发送数据字段"getCurrentRow(row) {this.lastData = row;//这一步值变化的话,从页面headView.vue 会监听到,做出反应},

这里采用引入页面的方式在同一个页面进行主从展示,只要在从页面定义好接收数据字段,在主页面定义好发送数据字段,就能在主页面发送数据,由从页面进行数据的监听,获取数据后进行进一步的处理,实现主从页面的数据传输。

从页面调用主页面的方法

为了演示

home.vue

data() {return {主页面this:{}}
},
mounted() {this.主页面this = this
}, 
methods: {点击调用子页面(){this.主页面this = this},主页面方法(){alert('我是主页面方法')}}

<headView  :主页面this="主页面this"></headView>

从页面headView正常接收这个参数进行监听

通过 

this.主页面this.主页面方法()  调用主页面的方法

1.将主页面的this传给从页面(通过上一步的方法进行传递)

相关文章:

【前端】在Vue页面中引入其它vue页面 数据传输 相互调用方法等

主页面 home 从页面 headView 需求 在 home.vue 中引用 headView.Vue 方案: home.vue 代码: 只需要在home.vue 想要的地方添加 <headView></headView> <script>//聊天页面 import headView /view/headView.vueexport default {components: {headView},…...

网络通信深入解析:探索TCP/IP模型

http协议访问web 你知道在我们的网页浏览器的地址当中输入url&#xff0c;未必是如何呈现的吗&#xff1f; web浏览器根据地址栏中指定的url&#xff0c;从web服务器获取文件资源&#xff08;resource&#xff09;等信息&#xff0c;从而显示出web页面。web使用HTTP&#xff08…...

可靠的可视化监控平台应用在那些场景?

可视化监控平台是一种用户友好的工具&#xff0c;可以帮助用户实时监控IT设备的运行状态和网络流量&#xff0c;以及监测安全性和性能指标。它们通常采用图形化界面&#xff0c;使得用户能够直观地了解设备和网络的状态。 以下是一些可视化监控平台常见的应用场景&#xff1a;…...

从 BBR 失速到带宽探测

看一下 pacing 流失速的成因&#xff1a; 一段时间收不到 ack&#xff0c;丢了 ack 自时钟&#xff0c;cwnd 将耗尽&#xff0c;bbr 虽有 cwnd_gain(上图没有表现)&#xff0c;但在该 cwnd_gain 下不依赖 ack 持续坚持发送多久取决于 cwnd_gain 的数值。 bbr 失速的后果在于…...

MobaXterm使用sz/rz命令下载上传文件

MobaXterm使用sz/rz命令下载上传文件 1 参考文档2 下载3 上传 1 参考文档 MobaXterm使用sz/rz命令下载上传文件 2 下载 步骤1&#xff1a;sz filename 步骤2&#xff1a;ctrl 鼠标右键 步骤3&#xff1a;Receive file using Z-modem 3 上传 步骤1&#xff1a;rz 步骤2&am…...

vue el-popover hover延时触发,el-popover 鼠标放上三秒以后触发

背景&#xff1a;el-popover hover只要鼠标刮过就显示 多个el-popover出现加载卡顿 解决方案 给el-popover加一个延时显示 <template><div><el-popovertrigger"hover":open-delay"3000"content"这是一个Popover"><button…...

计算机竞赛 基于深度学习的人脸识别系统

前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的人脸识别系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/…...

Android扫码连接WIFI实现

0&#xff0c;目标 APP中实现扫WIFI分享码自动连接WIFI功能 1&#xff0c;前提条件 设备需要有个扫码器&#xff08;摄像头拍照识别也行&#xff09;&#xff0c;APP调用扫码器读取WIFI连接分享码。 2&#xff0c;增加权限 在AndroidManifest.xml中增加权限 <uses-permissi…...

TrOCR – 基于 Transformer 的 OCR 入门指南

多年来,光学字符识别 (OCR) 出现了多项创新。它对零售、医疗保健、银行和许多其他行业的影响是巨大的。尽管有着悠久的历史和多种最先进的模型,研究人员仍在不断创新。与深度学习的许多其他领域一样,OCR 也看到了变压器神经网络的重要性和影响。如今,我们拥有像TrOCR(Tran…...

MAC终端美化

先看看效果&#xff1a; 1.安装on-my-zsh 打开终端&#xff0c;输出&#xff1a; sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)"安装过程中如果出现了链接超时的错误&#xff0c;不要慌&#xff0c;就再来一次&#x…...

Matlab常用字符串操作教程

Matlab是一种功能强大的编程语言&#xff0c;它提供了丰富的字符串操作函数。在本教程中&#xff0c;我们将介绍一些常用的Matlab字符串操作函数和用法。 字符串的创建和访问&#xff1a; 使用单引号或双引号创建字符串&#xff1a;str Hello World; 或 str "Hello Worl…...

基于SSM的汽车养护管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

Redis发布订阅机制学习

【IT老齐151】Redis发布订阅机制是如何实现的&#xff1f;_哔哩哔哩_bilibili go-redis的发布与订阅 - 知乎 (zhihu.com) 前置&#xff1a; 先输入 redis-server.exe 启动redis&#xff0c;否则对应接口不开放 再输入 redis-cli 命令启动客户端服务 1.机制示意图 当一…...

施展世界:GPT时代需要的教育,是学会如何提出好问题

来源&#xff1a;BV1co4y1W7h7 有很多脑力活&#xff0c;它实际上是伪装成脑力活的体力活&#xff0c;它在回答问题这个层面&#xff0c;那是非常的厉害&#xff0c;人现在肯定是比不过它了&#xff0c;注意了&#xff0c;这是回答问题的层面&#xff0c;但问题是谁来问问题呢&…...

Excel学习 WPS版

Excel学习 1.界面基础1.1 方格移动快捷键1.2 自动适配文字长度1.3 跨栏置中1.4 多个单元格同宽度&#xff1a;1.5 下拉框选择1.6 打印预览1.7 绘制边框1.8 冻结一行多行表头1.9 分割视图 2.日期相关2.1 今日日期快捷键2.2 月份提取 3.数学公式3.1 自动增长3.2 排序3.3 筛选3.4 …...

MySQL的Json类型个人用法详解

前言 虽然MySQL很早就添加了Json类型&#xff0c;但是在业务开发过程中还是很少设计带这种类型的表。少不代表没有&#xff0c;当真正要对Json类型进行特定查询&#xff0c;修改&#xff0c;插入和优化等操作时&#xff0c;却感觉一下子想不起那些函数怎么使用。比如把json里的…...

VUE 程序的执行过程(非常非常重要)

在Vue.js应用程序中&#xff0c;index.html和main.js的执行顺序是&#xff1a; 1. 首先&#xff0c;浏览器加载index.html文件。 2. 在index.html文件中&#xff0c;通过<script>标签引入了main.js文件。 3. 当浏览器遇到<script>标签时&#xff0c;它会停止解析H…...

指定cv::cuda::GpuMat创建所在的GPU卡

目录 1. 背景2. 函数说明3. 代码 1. 背景 在多卡服务器运行多应用时&#xff0c;要将应用跑在不同的GPU上&#xff0c;就需要通过代码指定所运行的GPU&#xff0c;cv::cuda::GpuMat创建时&#xff0c;同样需要指定创建所对应的GPU。 2. 函数说明 cv::cuda::setDevice 是 Ope…...

Camunda 7.x 系列【43】事务子流程

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 概述2. 和 ACID 的区别3. 取消和补偿事件3.1 取消结束事件3.2 取消边界事件3.3 补偿边界…...

vscode设置的json的配置(个人怕忘了做个记录,各位不用看)

{//导入文件时是否携带文件的扩展名"path-autocomplete.extensionOnImport": true,// 配置路径提示"path-autocomplete.pathMappings": {"": "${folder}/src"},"liveServer.settings.CustomBrowser": "microsoft-edge&…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...