在组件中像这样声明你的函数:

export default {
  mounted () {
    this.$root.$on('component1', () => {
      // do your logic here :D
    });
  }
};

并像这样从任何页面调用它:

this.$root.$emit("component1");

我不确定这是正确的方法，但这个方法适合我。 首先导入包含您想在组件中调用的方法的组件

import myComponent from './MyComponent'

然后调用mycomponent的任何方法

myComponent.methods.doSomething()

对于Vue2，这适用于:

var bus = new Vue()

//组件A的方法

bus.$emit('id-selected', 1)

//组件B创建的钩子

bus.$on('id-selected', function (id) {

  // ...
})

在这里查看Vue文档。 这里详细介绍了如何设置这个事件总线。

如果您想了解何时使用属性、事件和/或集中状态管理的更多信息，请参阅本文。

请看下面托马斯关于Vue 3的评论。

使用Vue 3:

const app = createApp({})

// register an options object
app.component('my-component', {
  /* ... */
})

....

// retrieve a registered component
const MyComponent = app.component('my-component')

MyComponent.methods.greet();

https://v3.vuejs.org/api/application-api.html#component

您可以使用Vue事件系统

vm.$broadcast('event-name', args)

and

 vm.$on('event-name', function())

这是小提琴: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

一个稍微不同(更简单)的公认答案:

在父实例上注册一个组件:

export default {
    components: { 'my-component': myComponent }
}

在template/html中使用引用渲染组件:

<my-component ref="foo"></my-component>

访问组件方法:

<script>
    this.$refs.foo.doSomething();
</script>