VUE组件与组件之间的传参

每次启动vue2项目的时候在 vue.config.js中配置:
 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//关闭语法严格检验lintOnSave:false})

1:在 src 下 创建 utils 文件夹 然后创建 BaseDao.js文件

import vue from "vue";
const BaseDao =new vue();
export default BaseDao;

2:创建School 与 Student 组件

<template><div class="School"><p>{{ ming }}</p><button @click="test1()">点击{{ ming }}给下方传参</button><p>接收的姓名:{{ lpl.name }}</p><p>接收的年龄:{{ lpl.age }}</p></div>
</template>
<script>
// 引入新的vue实例对象import BaseDao from "../utils/BaseDao";
export default {name: 'School',components: {BaseDao},mixins: [],props: {},data() {return {ming:'我是学校组件',dat:{name:'阿萨德',age:'26',},lpl:{}}},computed: {},watch: {},mounted() {},methods: {test1(){console.log(this.ming);// 左侧为给另一个组件传递的参数 ,右侧为当前实例对象BaseDao.$emit('data',this.dat)}},// 用于接受参数beforeCreate(){BaseDao.$on('lol',(data)=>{this.lpl=data})}
};
</script>
<style  scoped>
.School{background-color: aquamarine;width: 300px;height: 300px;}
</style>

Student:
 

<template><div class="Student"><p>{{ ming }}</p><button @click="test02()">点我给上方传参</button><p>接收的姓名:{{ asd.name }}</p><p>接收的年龄:{{ asd.age }}</p></div>
</template>
<script>
import BaseDao from "../utils/BaseDao";
export default {name: 'Student',components: {BaseDao},mixins: [],props: {},data() {return {ming:'我是学生组件',asd:{},lol:{name:'轻微',age:'33'}}},computed: {},watch: {},mounted() {},methods: {// 用于传递参数test02(){BaseDao.$emit('lol',this.lol)}},// 用于接受参数beforeCreate(){BaseDao.$on('data',(data)=>{this.asd=data})}
};
</script>
<style  scoped>
.Student{background-color: blueviolet;height: 300px;width: 300px;
}
</style>


 

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

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

相关文章

8年java开发从零学习人工智能(深度学习)--pp飞桨(百度自研开源框架)

1.明确概念&#xff1a;人工智能>机器学习>深度学习&#xff0c;三者的关系是包含关系&#xff0c;如图所示&#xff1a; 人工智能&#xff08;AI&#xff09;&#xff0c;很宽泛的概念&#xff0c;是研发用于模拟&#xff0c;延展和扩展人的智能的理论&#xff0c;方法&…

ci | cd

ci | cd 相当于开发人员和运维人员共同完成的东西 ci:Jenkins cd:k8s ci &#xff1a; 持续集成 开发人员写出的代码提交到共享仓库 比如说Git 自动触发代码检查 测试 好处&#xff1a; 很快的发现bug 代码不用堆积 cd: 持续交付&#xff1a;代码测试没问题后 自动打包…

深入理解C#委托操作:添加、移除与调用全解析

关键词&#xff1a;委托不可变性 多播委托 调用列表管理 ⚙️ 一、委托的核心特性&#xff1a;不可变性 看似“添加”&#xff0c;实为新建 使用 为委托“添加”方法时&#xff08;如 delVar SCl.m3;&#xff09;&#xff1a; 系统创建全新委托对象新委托的调用列表 原…

Spring Cloud:微服务架构的基石与实践指南

一、Spring Cloud 核心组件 &#xff08;一&#xff09;Spring Cloud Netflix Spring Cloud Netflix 是 Spring Cloud 的核心模块之一&#xff0c;它集成了 Netflix 的多个开源组件&#xff0c;提供了微服务架构中常见的功能&#xff0c;如服务注册与发现、配置中心、API 网关…

【VPX3U】国产嵌入式平台:RK3588J×JH930硬件架构与红外应用方案

随着对边缘计算与多媒体处理需求的提升&#xff0c;国产异构平台成为关键发展方向。最近有一个项目需求&#xff0c;提出了一款基于瑞芯微 RK3588J 处理器与景嘉微GPU 的 VPX3U 规格嵌入式主板的设计想法旨在融合高性能异构计算与丰富的视频、网络和存储接口&#xff0c;适用于…

秩序密码-用群论分析魔方的阶

三阶魔方的物理基础是由一个三维十字轴连接的 6 个中心块&#xff0c;这 6 个中心块决定了魔方的 6 种颜色朝向&#xff0c;构成不动的坐标系统&#xff0c;此外还有两类活动块&#xff0c;分别是8个角块&#xff0c;12个棱块。 魔方的每一层转动&#xff08;如 R: 右层顺时针…

Python驱动自动驾驶的“多眼”——打造高效传感器融合框架的实战思考

Python驱动自动驾驶的“多眼”——打造高效传感器融合框架的实战思考 最近,自动驾驶行业火得不行,背后支撑它的技术,远不止车载摄像头那么简单。真正让车“看懂”世界的,是多种传感器数据的“融合”,包括雷达、激光雷达(LiDAR)、摄像头、惯性测量单元(IMU)等等。 而如…

机器学习-- 聚类

什么是聚类&#xff1f; Clustering 可以简单地说&#xff0c;对有标注的数据分类&#xff0c;就是逻辑回归&#xff08;属于有监督分类&#xff09;&#xff0c;对无标注的数据分类&#xff0c;就是聚类&#xff08;属于无监督分类&#xff09; 聚类是一种无监督学习技术&am…

【Yonghong 企业日常问题08 】永洪BI的Apache Tomcat版本升级指南

文章目录 前言操作步骤登录验证 前言 某公司业务永洪BI系统使用tomcat 9.0.97版本&#xff0c;接到总公司漏洞扫描整改要求需要将tomcat版本升级到9.0.97以上。 目标&#xff1a;tomcat 9.0.97》 9.0.98 1、下载tomcat所需要的版本 地址:https://tomcat.apache.org/download-…

BigFoot RaidSlackCheck11.109.zip lua

BigFoot RaidSlackCheck11.109.zip lua 合剂buff检查插件 把lua脚本拷贝到游戏插件目录下&#xff1a; D:\Battle.net\World of Warcraft\_classic_\Interface\AddOns 命令 /rsc 下载地址&#xff1a; https://download.csdn.net/download/spencer_tseng/91181827

深入解析前端 Meta 标签:HTML 的隐形守护者与功能大师

在构建现代网页时&#xff0c;我们常常关注炫目的视觉效果、复杂的交互逻辑或强大的框架&#xff0c;却容易忽略那些深藏于 <head> 之中、看似不起眼的 <meta> 标签。这些标签如同网页的隐形守护者&#xff0c;无声地承担着定义文档元数据、指导浏览器行为、优化搜…

青少年编程与数学 01-012 通用应用软件简介 11 应用商店

青少年编程与数学 01-012 通用应用软件简介 11 应用商店 一、什么是应用商店&#xff08;一&#xff09;应用商店的基本定义&#xff08;二&#xff09;应用商店的工作原理&#xff08;三&#xff09;应用商店的类型 二、应用商店的重要意义&#xff08;一&#xff09;为用户提…

《红黑树实现》

引言&#xff1a; 上次我们学习了比二叉搜索树更高效的平衡二叉搜索树&#xff08;AVL树&#xff09;&#xff0c;这次我们要学习的是另外一种对二叉搜索树的优化后的红黑树。 一&#xff1a;红黑树概念&#xff1a; 红黑树是一棵二叉搜索树&#xff0c;他的每个结点增加一个…

领域驱动设计(DDD)【23】之泛化:从概念到实践

文章目录 一 泛化基础&#xff1a;理解DDD中的核心抽象机制1.1 什么是泛化&#xff1f;1.2 为什么泛化在DDD中重要&#xff1f;1.3 泛化与特化的双向关系 二 DDD中泛化的实现形式2.0 实现形式概览2.1 类继承&#xff1a;最直接的泛化实现2.2 接口实现&#xff1a;更灵活的泛化方…

机箱流动空气热学仿真方案

机箱流动空气热学仿真方案(二维平面与三维) 一、物理模型与数学模型 1. 控制方程 流动与传热基本方程: 连续性方程:∇(ρu) = 0动量方程(Navier-Stokes):ρ(u∇)u = -∇p + μ∇u + F能量方程:ρcₚ(u∇)T = k∇T + Φ边界条件: 入口:速度入口(u=u₀, T=T₀)出口:压…

electron 如何配置 打开控制台

在 Electron 应用中&#xff0c;打开开发者工具&#xff08;即控制台&#xff09;通常有两种方式&#xff1a; 程序运行时手动打开 在 Electron 应用中&#xff0c;你可以通过编程方式打开开发者工具。这通常在你需要调试时非常有用。你可以在你的主进程&#xff08;通常是 ma…

MR7350用TTL刷机救砖过程

很久之前就买了一台Linksys的MR7350路由器&#xff0c;准备有OpenWRT的官方固件之后再拿它当轻NAS用&#xff0c;最近看到出了Snapshot版&#xff0c;于是就拿来刷机试试。经过我坚持不懈的折腾&#xff0c;终于把我的MR7350路由器刷成了砖&#xff0c;即便是通过开机过程中断电…

在NPU单算子(torch_npu )执行时如何进行性能优化?以MinerU为例

1 MinerU介绍 在AI技术快速发展的今天&#xff0c;大量非结构化数据的处理成为亟待解决的问题。尤其是PDF文档&#xff0c;作为最常见的文件格式之一&#xff0c;如何高效准确地提取其中的信息&#xff0c;成为了许多企业和研究机构的痛点。上海人工智能实验室&#xff08;上海…

鸿蒙OS开发IoT控制应用:从入门到实践

引言&#xff1a;万物互联时代的应用开发新范式 在物联网(IoT)技术迅猛发展的今天&#xff0c;智能设备数量呈指数级增长。据IDC预测&#xff0c;到2025年全球IoT连接设备数将达到416亿台。面对碎片化的IoT设备和多样化的控制需求&#xff0c;华为鸿蒙OS(HarmonyOS)应运而生&a…

五层网络模型:网络通信的核心框架

在网络通信的世界里&#xff0c;五层网络模型是一个基础而关键的概念。它帮助我们理解数据是如何在网络上从一个设备传输到另一个设备的。本文将详细介绍五层网络模型的每一层&#xff0c;以及它们在数据传输过程中的作用。 一、五层网络模型概述 五层网络模型是一种分层的网…