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 相关文章推荐
DWZ刷新dialog解决方法
Mar 03 Javascript
jQuery DOM操作实例
Mar 05 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
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
福利彩票幸运号码自动生成器
2006/10/09 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
没有document.getElementByName方法
2013/08/19 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
js的三种继承方式详解
2017/01/21 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
koa源码中promise的解读
2018/11/13 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
使用Python对MySQL数据操作
2017/04/06 Python
python opencv之分水岭算法示例
2018/02/24 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
自我评价是什么
2014/01/04 职场文书
应聘教师求职信
2014/07/19 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2016七夕情人节感言
2015/12/09 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python