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 ...
随机推荐
- CH59x 系统16位PWM使用
以下使用CH592X做验证 CH59X系列相对于CH58X,CH57X系列的8位系统PWM多了6路的16位的PWM. CH59X除了定时器提供的 4 路 26 位 PWM 输出之外,系统还提供了 8 ...
- Redis本地安装以及使用(详细教程)
Redis 安装 Windows 下载安装 Redis默认端口:6379 整个过程如下: 1.下载连接 https://github.com/tporadowski/redis/releases Re ...
- Miller_Rabin 学习笔记
费马小定理:对于任意一个质数满足:\(a^{p-1}\equiv1\pmod p\) 二次探测:对于任意一个奇质数满足:\(x^2\equiv1\pmod p\) 的解为 \(x=1\) 或 \(x= ...
- Head First Java学习:第十四章-序列化和文件
第十四章 序列化和文件的输入输出 保存对象 1.什么是序列化和反序列化 在编程的世界当中,常常有这样的需求:我们需要将本地已经实例化的某个对象,通过网络传递到其他机器当中,为了满足这种需求,就有了所谓 ...
- sudo: unable to execute /bin/rm: Argument list too long
Linux,删除文件夹下所有内容,数据太多时,报错too long sudo rm -r /var/lib/jenkins/workspace/test_1/allure-report/data/at ...
- idea2020下载、安装、破解、配置
idea2020下载.安装.破解.配置 idea2020下载 [推荐]官方下载地址:https://www.jetbrains.com/idea/download/other.html 进入后往下找, ...
- 从零玩转设计模式之建造者模式-jianzaozhemoshi
title: 从零玩转设计模式之建造者模式 date: 2022-12-08 18:15:30.898 updated: 2022-12-23 15:35:58.428 url: https://ww ...
- STM32CubeMX教程5 TIM 定时器概述及基本定时器
1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 逻 ...
- Python笔记三之闭包与装饰器
本文首发于公众号:Hunter后端 原文链接:Python笔记三之闭包与装饰器 这一篇笔记介绍 Python 里面的装饰器. 在介绍装饰器前,首先提出这样一个需求,我想统计某个函数的执行时间,假设这个 ...
- 7.elasticsearch重建索引
什么时候需要重建索引 索引的mappings发生变更 索引的setting发生变更 集群内,集群间,需要做数据迁移 update by query 在现有索引重建 比如需要给一个text新增一个子字段 ...