vue中实现在外部调用methods的方法(推荐)


Posted in Javascript onFebruary 08, 2018

1.首先定义一个公共的vue组件;

var eventHub = new Vue();

2.在事件当前的组件中,在created中,用$on向公共的组件eventHub传递,translate是自定义的,getCardNum(data)是要在外部调用的方法;

eventHub.$on('translate', function (data) { 
        that.getCardNum(data); 
      });

3.最后在父组件中,注意负组件要用一个变量保存,var vm = new Vue({});

4.在父组件中的methods的方法中定义一个方法,在方法里用$emit接收公共组件里的方法;

var vm = new Vue({ 
 el: '#example', 
 data: { 
  msg: 'Hello Directive', 
  data: {} 
 }, 
 methods: { 
  getCardNum: function (data, on) { 
   eventHub.$emit('translate', data); 
  } 
 } 
});

5.最后就可以在vue组件外部,或者文件外部调用getCardNum(data)这个函数,比如在html中就可以 onclick = vm.getCardNum() 这样来调用;vm是父组件

6.注意一定要把父组件的变量名写上 vm.getCardNum();

我用vue开发的过程中,遇到java后台的弹窗页面想要调用我vue组件中的方法,可是后台的弹窗页面并没有在我的vue组件中,其他的页面想要调用的vue中的方法,只能在父组件中调用,于是研究了很久,最后确定,将组件中的function()方法传递到最上一层的父组件中,将负组件保存在变量中,最后直接在其他页面中调用方法,调用的时候,就不能用@click方法来调用了,因为后台的页面并不在我的vue组件内部,于是调用就是onclick = vm.getCardNum();这样调用,vm是父组件

以上这篇vue中实现在外部调用methods的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js比较和逻辑运算符的介绍
Mar 10 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
10 种最常见的 Javascript 错误(频率最高)
Feb 08 #Javascript
Vue组件通信的四种方式汇总
Feb 08 #Javascript
Vue Socket.io源码解读
Feb 07 #Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 #Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 #Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 #Javascript
Vue.set()实现数据动态响应的方法
Feb 07 #Javascript
You might like
PHP4之真OO
2006/10/09 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
canvas知识总结
2017/01/25 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
详解django中自定义标签和过滤器
2017/07/03 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python贪吃蛇游戏代码
2020/04/18 Python
什么是Python中的顺序表
2020/06/02 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
计算机专业职业生涯规划范文
2014/01/19 职场文书
村容村貌整治方案
2014/05/21 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Python循环之while无限迭代
2022/04/30 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python