使用场景:

页面分为header、home、footer三部分,需要在home中调用header中的方法,这两个没有相互引入

官方给出方法:

需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关系,看了一下vue的API发现可以用这个方法实现。

https://cn.vuejs.org/v2/api/#vm-on

在项目中实现:

1.首先同一个vue实例来调用两个方法。所以可以建立一个中转站。

建立 util.js 中转站文件(任意位置,我是在/assets/js/util.js)

import Vue from 'vue'
export default new Vue

2.分别在两个页面引入该文件(注意路径)

import Utils from '../../assets/js/util.js';

3.调用方代码

methods: {
functionA() {
Utils.$emit('demo','msg');
}
}

4.被调用方代码

mounted(){
var that = this;
Utils.$on('demo', function (msg) {
console.log(msg);
that.functionB();
})
},
methods: {
functionB() {
...
}
}

Vue.js如何在一个页面调用另一个同级页面的方法的更多相关文章

  1. 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...

  2. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  3. 在JSP页面中调用另一个JSP页面中的变量

    在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...

  4. 创建Vue.js对象:我的第一个Vue.js输出信息

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...

  5. Js文件函数中调用另一个Js文件函数的方法

    在项目中Js文件需要完成某一功能,但这一功能的大部分代码在另外一个Js文件已经完成,只需要调用这个文件实现功能.那么如何调用:一个Js文件函数中调用另一个Js文件函数的方法? (直接代码说明) 示例d ...

  6. vue.js 中使用(...)运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

  7. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  8. 我与PHP,ULM和Vue.js不得不说的故事(一个放荡不羁与一个神神秘秘一个似曾相识,从入门到放弃记录第二章)

    ·关于UML(git) 究竟是命运在茫茫语言之中遇到了你,还是我的魅力让你向我奔涌而来.好吧都不是,我俩就像古代包办婚姻,被专业牢牢的绑在一起了,既然都是一条绳上的蚂蚱.我我们应该能体谅彼此的不容易, ...

  9. 一个jsp页面引入另一个jsp页面的三种方式 及静态引入和动态引入的区别

    转载下, 转载自:http://blog.csdn.net/fn_2015/article/details/70311495 1.第一种:jstl  import <c:import url=& ...

随机推荐

  1. 依赖注入[7]: .NET Core DI框架[服务注册]

    包含服务注册信息的IServiceCollection对象最终被用来创建作为DI容器的IServiceProvider对象.服务注册就是创建出现相应的ServiceDescriptor对象并将其添加到 ...

  2. 安卓开发学习笔记(二):如何用Android Stuidio在res资源下创建xml视图文件

    笔者在看了相关的教程之后发现教程当中的资源已经过时了.当我们在创建了一个新的空白的工程之后,会发现其文件夹下面的分文件夹目录和官方的教程文件结构完全不同,因此会引起很多误解.笔者使用的是最新版的And ...

  3. [Swift]LeetCode986. 区间列表的交集 | Interval List Intersections

    Given two lists of closed intervals, each list of intervals is pairwise disjoint and in sorted order ...

  4. zuul进阶学习(二)

    1. zuul进阶学习(二) 1.1. zuul对接apollo 1.1.1. Netflix Archaius 1.1.2. 定期拉 1.2. zuul生产管理实践 1.2.1. zuul网关参考部 ...

  5. java.lang.AbstractMethodError: org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()Ljava/lang/Integer; 报错解决

    我的妈呀  真的是各种报错..... 这个问题    解决方法: https://www.cnblogs.com/beppezhang/p/6118661.html

  6. LeetCode算法题-Image Smoother(Java实现)

    这是悦乐书的第282次更新,第299篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第150题(顺位题号是661).给定表示图像灰度的2D整数矩阵M,您需要设计一个平滑器以 ...

  7. ASP.NET Core 2.0 MVC - 获取当前登录用户信息

    一.前言 上篇实战完成后,没想到会有那么多的圈友给了那么多的支持,甚至连只是作为代码仓储的git上也给了一些小星星,真的感觉很惶恐啊,哈哈哈,毕竟代码写的很烂啊.由于上一篇只是大概说了下项目,所以准备 ...

  8. LinkedHashMap 底层分析

    众所周知 HashMap 是一个无序的 Map,因为每次根据 key 的 hashcode 映射到 Entry 数组上,所以遍历出来的顺序并不是写入的顺序. 因此 JDK 推出一个基于 HashMap ...

  9. TDX指标的理解与改造(价格到达指标线提醒)

    目的:画线指标理解,并同时改造成条件选股指标. 参考:https://mp.csdn.net/postedit/83176406 #ff7700 hex color  https://www.colo ...

  10. IdentityServer4之Implicit(隐式许可)

    IdentityServer4之Implicit(隐式许可) 参考 官方文档:3_interactive_login .7_javascript_client 概念:隐式许可 认证服务端配置 认证服务 ...