vue子页面给App.vue传值
前端工程现在变成了单页面富文本的模式,整体布局定下来后,跳转只在<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传值的更多相关文章
- [Vue]子组件与父组件之间传值
1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...
- vue子组件向父组件传值
vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...
- Vue子页面给父页面传递数据
子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...
- vue 子页面,向父页面 传值...
子组件 通过 事件 向父组件传值..... 父组件 方法: methods: { appendData: function (list) { console.log(list); for (var i ...
- vue 单页面应用 app自适应方案
本文是使用淘宝的方案进行布局开发的,遇到的问题是会对app内使用的第三方插件,当页面进行缩放后,比如高德地图中的文字会显得过小,我使用的方法就是手动的动每一个尺寸进行手动的px 到 rem的替换,而不 ...
- vue 子组件向父组件传值通信
父组件 子组件 子组件用this.$emit
- VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...
- 关于Vue 刷新页面
前言 Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么就 ...
- Vue单页面应用打包app处理返回按钮
情况 顶部返回,在header.vue公用组件中使用 this.$router.go(-1) 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不 ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
随机推荐
- vue的响应式原理:依赖追踪
在明白原理之前,我们有很多表面现象.使用场景需要记忆.明白了原理后,你会发现它们已经不需要记了,因为从原理出发,你自己都能把它们推导出来,一切是那么的自然而然.感觉就是:这还用记吗?很明显嘛! 之前我 ...
- 使用 Kubernetes 为 CI/CD 流水线打造高效可靠的临时环境
介绍 在不断发展的科技世界中,快速构建高质量的软件至关重要.在真实环境中测试应用程序是及早发现和修复错误的关键.但是,在真实环境中设置 CI/CD 流水线进行测试可能既棘手又昂贵. Kubernete ...
- [python][图像切割]给定手写数字图片完成数字切割
import torch import torch.nn as nn from torchvision import transforms from PIL import Image, ImageOp ...
- oracle12c静默安装
oracle12c 静默安装 先决条件 ● 至少 1 GB RAM 用于 Oracle 数据库安装.建议使用 2 GB 内存. ● 至少 8 GB RAM 用于 Oracle Grid Infrast ...
- 【低代码】低代码平台协同&敏捷场景下的并行开发解决方案探索
低代码开发平台的出现,大大地提高的产品交付效率,但是在协同开发.敏捷迭代的场景下,也暴露出了一些问题. 例如: 多人同时对项目进行修改,相互影响甚至修改内容被互相覆盖: 同一项目下多个需求同步开发,但 ...
- Python用辗转相除法计算两数的最大公约数和最小公倍数
计算最大公约数运用辗转相除法就行了 计算最小公倍数需要运用公式:最小公倍数=数字1*数字2/最大公约数 有关辗转相除法的知识请查看:辗转相除法 以下为代码: #计算最大公约数 def gys (x,y ...
- Git commit emoji 对照表
emoji emoji代码 commit说明 (调色板) :art: 改进代码结构/代码格式 ️ (闪电) :zap: 提升性能 (赛马) :racehorse: 提升性能 (火焰) :fire: 移 ...
- 《架构整洁之道》学习笔记 Part 1 概述
本书主题 介绍什么是优秀的软件架构,以提高软件架构质量 介绍系统架构的各种属性与成本和生产力的关系,以采用好的设计和架构以便减少构建成本 好的软件架构可以带来什么? 大大节省软件项目构建与维护的人力成 ...
- Windows下编译64位CGAL
目录 1. 准备 2. CMake构建 1. 准备 CGAL的官网准备了压缩包和安装程序两种类型的的源代码,推荐使用安装程序包,因为其中自带了编译好的gmp和mpfr库.gmp和mpfr是CGAL的依 ...
- 避坑指南:关于SPDK问题分析过程
[前言] 这是一次充满曲折与反转的问题分析,资料很少,代码很多,经验很少,概念很多,当内核态,用户态,DIF,LBA,大页内存,SGL,RDMA,NVME和SSD一起迎面而来的时候,问题是单点的意外, ...