首页 > 其他分享 >vue不同页面方法调用|跨页面传参|事件总线

vue不同页面方法调用|跨页面传参|事件总线

时间:2023-04-18 15:46:51浏览次数:34  
标签:传参 vue 总线 getlog Bus import Event 页面

事件总线

需要在不同页面间传递参数或者进行方法调用,可以使用事件总线

1.引入中间js

src下的Utils文件夹下创建一个Bus.js其内容如下

import Vue from 'vue'
export default new Vue()

2.A页面(发起请求)

import Event from '@/utils/Bus'

Event.$emit('getlog',参数)

3.B页面(收到请求)

import Event from '@/utils/Bus'

mounted() {
    //开启监听
    Event.$on('getlog', (参数) => {
        console.log('被调用')
        //执行方法 	
    })
},

注销监听

Event.$off('getlog', () => {
    console.log('注销')	
})

标签:传参,vue,总线,getlog,Bus,import,Event,页面
From: https://www.cnblogs.com/ommggg/p/17329800.html

相关文章

  • vue3微信公众号商城项目实战系列(7)自定义底部tabbar组件
    在开始之前,先看看官方对组件的定义: vue3的生态非常丰富,有各种各样的开源组件库可以拿来就用,比如vant、element-ui等,本系列不使用任何第3方组件,完全使用原生的语法来写,只为聚焦vue3技术本身,本篇写一个自定义tabbar组件,效果如下图所示:要实现如下功能:1.底部tab项固定3个:首页......
  • vue全家桶进阶之路33:Vue3 计算属性computed
    在Vue3中,计算属性可以使用computed函数来定义。computed函数接受两个参数:第一个参数是一个函数,该函数返回计算属性的值;第二个参数是一个可选的配置对象,可以包含getter和setter函数,以及控制计算属性缓存的缓存配置。Vue3中的计算属性与Vue2中的计算属性相比有以下几个变化:使用......
  • 为什么html页面不能显示标签el-checkbox的多选框,只有名称值
    问题描述我引入了el-checkbox之后,发现浏览器页面只是显示里面的文字,并没有显示出来我想要看到的相应样式问题解决经过一定的百度查证可知,使用Element-UI组件时,我们需要用div标签将其包裹起来;然后使用script标签定义一下div里面的id属性,然后才能够引用到这个el-标签,让其中的样......
  • 直播app源码,使用vue-awesome-swiper创建轮播图幻灯片
    直播app源码,使用vue-awesome-swiper创建轮播图幻灯片1.引入引入方式可以参考官方文档,两种方式选一种即可:vue-awesome-swiperatv3.1.3 (1)第一种方式:在main.js入口文件中全局引入 ///src/main.js //swiper全局引入importVueAwesomeSwiperfrom'vue-awesome-swiper'im......
  • vue项目使用定时器每隔几秒运行一次某方法
    代码如下:data(){return{timer:null,//定时器名称};},created(){this.setTime();},beforeDestroy(){clearInterval(this.timer);//清除定时器this.timer=null;},methods:{setTime(){//每隔一分钟运行一次保存方法this.timer......
  • 活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度
    本文由葡萄城技术团队于原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 上两篇中我们分享了如何利用数据库主键和表格设置默认不加载数据来提升应用系统访问的性能。在本篇中一起来看看如何在活字格中利用CDN技术来提升页面的......
  • 初识vue3
    定义Vue是一款Javascript框架,基于前端三大件,提供了具有组件化,声明式,渐进式的特点的编程模型。核心功能1.声明式渲染2.响应式组件之单文件组件Vue最为核心的组成部分便是单文件组件,文件结尾为*.vue宏观的逻辑是这样的:*.vue创建组件->.js文件中将组件实例化生成一个应用实......
  • vite vue使用pont-engine
    pont-engine是一款阿里的api生成工具!安装依赖即可yarnadd--devpont-engine然后即可使用pontstart问题但是因为默认生成的代码包含cjs的模块语法,所以vite无法识别。另外生成代码前最好把旧的生成目录删除!解决办法因此我做了如下优化,让您一键执行这些操作并生成适......
  • ip 表单验证 vue iview
    ip表单验证vueiviewtemplate<Rowv-show="config.bindIP"><Colspan="12"><FormItemlabel="绑定IP:"prop="userPhoto":rules="[{required:t......
  • vue中使两个不同高度的div(内容长度不一)高度相同
    设置高度height,记得给左右侧div一个最小高度min-height,保证没有内容的时候有一定的高度,内容撑起来的时候再自动适应<el-col:xs="12":sm="6":md="2"class="grid-cell"><divclass="grid-contentbg-purple":style="{height:divH......