前端工程现在变成了单页面富文本的模式,整体布局定下来后,跳转只在<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. 【scikit-learn基础】--『数据加载』之真实数据集

    上一篇介绍了scikit-learn中的几个玩具数据集,本篇介绍scikit-learn提供的一些真实的数据集.玩具数据集:scikit-learn 基础(01)--『数据加载』之玩具数据集 1. 获 ...

  2. [ABC265F] Manhattan Cafe

    Problem Statement In an $N$-dimensional space, the Manhattan distance $d(x,y)$ between two points $x ...

  3. Spring系列:基于Spring-AOP和Spring-Aspects实现AOP切面编程

    目录 一.概念及相关术语 概念 相关术语 ①横切关注点 ②通知(增强) ③切面 ④目标 ⑤代理 ⑥连接点 ⑦切入点 作用 二.基于注解的AOP 技术说明 准备工作 创建切面类并配置 各种通知 切入点表 ...

  4. 【Python】【OpenCV】边缘检测和创建自定义核

    对于使用OpenCV已有的算子,我们还可以自定义卷积核以达到不同的效果. filters.py 1 import cv2 2 import numpy 3 4 """ 定 ...

  5. python自动化测试相关资料

     java神功: https://yuedu.baidu.com/ebook/10f4bf7530126edb6f1aff00bed5b9f3f80f7212   selenium书:https:// ...

  6. ElasticSearch之cat datafeeds API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/ml/datafeeds?v=true&pretty" --cacert ...

  7. 开源:Taurus.DTC 微服务分布式事务框架,支持 .Net 和 .Net Core 双系列版本

    前言: 在经过1年多的深思,十几年的框架编写技术沉淀下,花了近一个月的时间,终于又为 .Net 及 .Net Core 的微服务系列框架贡献当中的一个重要组件. 1.开源地址: https://git ...

  8. 7、Flutter GridView网格布局组件(遍历)

    GridView创建网格列表主要有下面三种方式 1.可以通过GridView.count 实现网格布局    一行的 Widget 数量 class HomePage extends Stateles ...

  9. 2021平(jia)凡(ban)的一年

    0x00 刚刚把<平凡的世界>电视剧看完.也不知道什么原因,又去刷了一遍, 可能是有那么一段时间比较迷茫.加班加到怀疑人生了吧. 记得当年第一次看这本小说还是17年,好像是为了借一本什么书 ...

  10. 案例集锦|科技赋能,华为云GaussDB助千行百业数字化转型

    当下,全社会驶入数字化转型快车道,以科技赋能.智慧转型为主旨的数字生态推动着千行百业的变革.数据库作为企业核心数据底座,华为云提供了安全可靠的云原生底座和一站式上云解决方案.其中华为云GaussDB覆 ...