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的方法中定义一个方法，在方法里用$emi
在Vue.js应用中，有时我们需要在组件外部调用组件内部的方法。这通常发生在需要跨组件通信，例如在非Vue环境中（如Java后台弹窗页面）触发Vue组件的行为时。以下是一种推荐的实现方式：
我们需要创建一个全局的事件总线（Event Bus），即一个公共的Vue实例，用于在不同组件之间传递消息。这可以通过新建一个Vue对象来完成：
```javascript
// 定义一个公共的vue组件
var eventHub = new Vue();
```
接下来，在需要被调用的方法所在的组件中，我们在`created`生命周期钩子中监听事件总线上的特定事件。这里假设我们有一个名为`getCardNum`的方法，我们希望外部可以调用它。为此，我们需要在`created`中使用`$on`来注册一个事件监听器：
```javascript
export default {
created() {
// 使用$on向公共组件eventHub传递事件
eventHub.$on('translate', function (data) {
this.getCardNum(data);
});
},
methods: {
getCardNum(data) {
// 方法的具体实现
}
}
};
```
在这个例子中，`translate`是我们自定义的事件名，当外部触发这个事件时，`getCardNum`方法会接收到传递的数据`data`。
在父组件中，我们需要保存对子组件的引用，以便于外部调用其方法。创建一个新的Vue实例，并将其保存在一个变量`vm`中：
```javascript
// 注意：实际的Vue实例可能已经存在，这里假设没有
var vm = new Vue({
el: '#example',
data: {
msg: 'Hello Directive',
data: {}
},
methods: {
triggerGetCardNum(data) {
// 在方法里用$emit触发公共组件里的方法
eventHub.$emit('translate', data);
}
}
});
```
此时，父组件中定义了一个名为`triggerGetCardNum`的方法，它通过`$emit`触发`translate`事件，从而间接调用子组件的`getCardNum`方法。
在外部（如HTML或非Vue环境）调用Vue组件的方法时，可以直接通过父组件的实例`vm`来调用`triggerGetCardNum`方法：
```html
<button onclick="vm.triggerGetCardNum()">调用getCardNum方法</button>
```
这里的`vm`是父组件的引用，确保在外部可以访问到。请注意，由于Vue的特性，直接在HTML中使用`@click`指令可能无法在非Vue环境中工作，因此我们使用`onclick`属性来调用方法。
总结起来，通过创建一个事件总线并利用Vue的`$on`和`$emit`，我们可以实现在Vue组件外部调用内部的`methods`。这种通信方式灵活且适用于多种场景，尤其在跨组件通信和与非Vue环境交互时非常有用。但也要注意，过度依赖事件总线可能会导致代码耦合度过高，所以在大型项目中，应考虑使用Vuex等状态管理工具来更有效地管理组件间的通信。
