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 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
vue 实现上传组件
May 31 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python获取当前路径实现代码
2017/05/08 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python selenium操作cookie的实现
2020/03/18 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
企业项目策划书
2014/01/11 职场文书
安全环保标语
2014/06/09 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
2014年妇联工作总结
2014/11/21 职场文书
优秀党员申报材料
2014/12/18 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL