vue如何实现外部调用methods

本篇内容主要讲解“vue如何实现外部调用methods”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现外部调用methods”吧!

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是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

到此，相信大家对“vue如何实现外部调用methods”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！