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 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
node上的redis调用优化示例详解
Oct 30 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
node 版本切换的实现
Feb 02 Javascript
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
高亮度显示php源代码
2006/10/09 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php url路由入门实例
2014/04/23 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
删除重复数据的算法
2006/11/23 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
python实现AES加密解密
2019/03/28 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python实现取余操作的简单实例
2020/08/16 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
给老婆大人的检讨书
2014/02/24 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
MySQL数据管理操作示例讲解
2022/12/24 MySQL