Vue.js如何在一个页面调用另一个同级页面的方法

使用场景:

页面分为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() {
        ...
    }
}

原文地址:https://www.cnblogs.com/yanqiong/p/10469479.html

时间: 2024-11-06 23:08:19

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

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

<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</title><script src=”js/vue.js”></script></head><body><div id=”app”><p>{{ message }}</p></div> <script&g

轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用)

轻量级MVVM框架Vue.js快速上手(MVVM.SEO单页面应用.×××服务器端渲染.Nuxt.js) 网盘地址:https://pan.baidu.com/s/1LkhepNpGAtRjrxp_CVJNIg 密码: d483备用地址(腾讯微云):https://share.weiyun.com/5tTLqQk 密码:pxezuj Vue.js是一套构建用户界面的轻量级MVVM框架,与其他重量级框架不同的是, Vue.js 的核心库只关注视图层,并且非常容易学习,很容易与其它前端技术或已有的项

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

vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSize' ]) }, 这个错误是在项目中,不识别es6的扩展运算符,解决办法(四步走)如下: 第一步:安装babel-plugin-transform-object-rest-spread cnpm install babel-plugin-transform-object-rest-spread 第二

[ jquery 过滤器next(expr) ] 此方法用于在选择器的基础之上搜索被选元素的后一个同级元素,此方法参数只能传递表达式,无法传递其他类型

此方法用于在选择器的基础之上搜索被选元素的后一个同级元素,此方法参数只能传递表达式,无法传递其他类型: 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,key

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

Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境: 1.首先,我们需要安装 node.js: 安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm

【JS】测试:HTML页面引入另一个HTML页面,同名ID会冲突吗

今天被问到一个问题,就是当页面HTML页面引入了另外一个HTML页面,恰好2个页面具有相同的ID,那么需要用ID来处理一些行为的时候会发生冲突或者报错吗? 我用了iframe来引入另外一个HTML页面. 先准备好材料:1个HTML页面(含iframe标签,我命名为test.html),再加一个HTML页面(作为iframe页面的src源,这个页面我命名为iframe.html).两个页面的内容分别如下: test.html: <!DOCTYPE html> <html> <h

html页面引入另一个html页面

我们在使用代码编程一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引进去,就能节省很多时间,减少很多代码. 在这里,有好几种引入html文件的方式,不过每种都是有利有弊,需要根据需要自行选择 有大佬反馈解决了有些浏览器本地实现不了的问题:放到服务器上面!(感谢!!!) 注意:引入后主页面的Css样式不适用于被引入页面,比如在主页面设置 <style type="t

如何在一个页面调用另一个页面

利用iframe <Iframe src="page1.html" width="250" height="200" scrolling="no" frameborder="0"></iframe> <div class="swiper-slide" style="background:#add;"> <Iframe src=

用CORS 解决vue.js django跨域调用

Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版.与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求.用 CORS 可以让网页设计师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好.另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作.现代的浏览器都支持 CO