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 一段左右两边随屏滚动的代码
Jun 18 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
汇科协同Java笔试题
2012/03/31 面试题
质检部部长职责
2013/12/16 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
经典促销广告词大全
2014/03/19 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
党员领导干部承诺书
2014/05/28 职场文书
环保志愿者活动方案
2014/08/14 职场文书
甜品店创业计划书
2014/08/14 职场文书
小学庆六一活动总结
2014/08/28 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2015年新农合工作总结
2015/03/30 职场文书
Nginx 常用配置
2022/05/15 Servers