前端工程现在变成了单页面富文本的模式,整体布局定下来后,跳转只在<router-view>中展示,外层的布局不容易改变。最近发现有如下这个方法可以直接传值给App.vue,经过实践确实可以实现。

1、安装依赖

npm install vue-bus

2、main.js引入

import VueBus from 'vue-bus'
Vue.use(VueBus)

3、在子页面传递数据

allWarning(){
this.$bus.emit("lowerRight",1);
}

4、在APP.vue中接收

mounted(){
//通过on监听事件,回调方法获取数据
this.$bus.on("lowerRight",value=>{
console.log(value)
});
} ,

vue子页面给App.vue传值的更多相关文章

  1. [Vue]子组件与父组件之间传值

    1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...

  2. vue子组件向父组件传值

    vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...

  3. Vue子页面给父页面传递数据

    子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...

  4. vue 子页面,向父页面 传值...

    子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...

  5. vue 单页面应用 app自适应方案

    本文是使用淘宝的方案进行布局开发的,遇到的问题是会对app内使用的第三方插件,当页面进行缩放后,比如高德地图中的文字会显得过小,我使用的方法就是手动的动每一个尺寸进行手动的px 到 rem的替换,而不 ...

  6. vue 子组件向父组件传值通信

    父组件 子组件 子组件用this.$emit

  7. VUE 子组件向父组件传值 , 并且触发父组件方法(函数)

    目标:封装一个  搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...

  8. 关于Vue 刷新页面

    前言 Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么就 ...

  9. Vue单页面应用打包app处理返回按钮

    情况 顶部返回,在header.vue公用组件中使用 this.$router.go(-1) 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不 ...

  10. vue 父组件给子组件传值,子组件给父组件传值

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...

随机推荐

  1. 多维度分析数据的软件,BI软件不就是吗

    BI软件(Business Intelligence Software)是一种用于多维度分析数据的工具,可以帮助企业从海量数据中提取有价值的洞察力,并为决策者和业务用户提供可视化.交互式的报表和仪表盘 ...

  2. 解密Prompt系列20. LLM Agent之再谈RAG的召回多样性优化

    几个月前我们就聊过RAG的经典方案解密Prompt系列14. LLM Agent之搜索应用设计.前几天刚看完openAI在DevDay闭门会议上介绍的RAG相关的经验,有些新的感悟,借此机会再梳理下R ...

  3. 理解Mysql索引原理及特性

    作为开发人员,碰到了执行时间较长的sql时,基本上大家都会说"加个索引吧".但是索引是什么东西,索引有哪些特性,下面和大家简单讨论一下. 1 索引如何工作,是如何加快查询速度 索引 ...

  4. springBoot——读取数据

    在yml文件中读取数据,用$符号就可以 类似于这样的 如果要读取yml里面全部的数据,就用自动装配来写 而如果要用实体类来读取里面的数据 package com.example.springboot_ ...

  5. ubuntu安装cudnn

    有些忙,这一段时间,博客就随便写写了--- 默认cuda安装好了,这里就不多说了,我们从cuda的环境变量开始说起: 配置cuda环境变量: 打开终端,输入"gedit ~/.bashrc& ...

  6. 5个免费、跨平台的SQLite数据库可视化工具

    前言 SQLite是一个轻量级的嵌入式关系型数据库,目前最新的版本是 SQLite3.今天推荐5个实用的SQLite数据库可视化工具(GUI),帮助大家更好的管理SQLite数据库. 什么是SQLit ...

  7. Selenium等待元素出现

    https://www.selenium.dev/documentation/webdriver/waits/ 有时候我们需要等待网页上的元素出现后才能操作.selenium中可以使用以下几种方法等大 ...

  8. 强!推荐一款自动化神器Autolt:不再重复工作

    随着互联网不断发展,它给我们带来便利的同时,也带来了枯燥.重复.机械的重复工作.今天,我要和大家分享一款老牌实用的自动化工具:AutoIt,它能够让你告别繁琐的重复性工作,提高工作效率. 这里透露一下 ...

  9. 从零玩转Docker之docker-compose-azdocker-compose

    title: 从零玩转Docker之docker-compose date: 2023-04-04 17:39:40.699 updated: 2023-04-04 17:52:15.329 url: ...

  10. .NET MAUI (微软 .Net 6 跨多平台应用 UI)框架的研究学习

    针对 .NET MAUI (微软 .Net 6 跨多平台应用 UI)框架的研究学习,使用VS2022  C# 和 XAML 创建本机移动和桌面应用,开发一套代码可以发布在 Android . iOS ...