有时您希望将这些内容包含在组件中。根据DOM状态(当Vue组件实例化时，监听的元素必须存在于DOM中)，您可以从Vue组件内部监听组件外部元素上的事件。假设在组件外部有一个元素，当用户单击它时，您希望组件做出响应。

在html中，你有:

<a href="#" id="outsideLink">Launch the component</a>
...
<my-component></my-component>

在你的Vue组件中:

    methods() {
      doSomething() {
        // do something
      }
    },
    created() {
       document.getElementById('outsideLink').addEventListener('click', evt => 
       {
          this.doSomething();
       });
    }
    

对于Vue2，这适用于:

var bus = new Vue()

//组件A的方法

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

//组件B创建的钩子

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

  // ...
})

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

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

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

假设你在子组件中有一个child_method():

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

现在你想从父组件执行child_method:

<template>
    <div>
        <button @click="exec">Execute child component</button>
        <child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
    </div>
</template>

export default {
    methods: {
        exec () { //accessing the child component instance through $refs
            this.$refs.child.child_method() //execute the method belongs to the child component
        }
    }
}

如果你想从子组件执行父组件方法:

parent.name_of_method美元。()

注意:不建议像这样访问子组件和父组件。

相反，作为最佳实践，使用道具和事件进行亲子交流。

如果你想要组件之间的通信，一定要使用vuex或事件总线

请阅读这篇非常有用的文章

如果你使用Vue 3和<script setup> sugar，请注意，组件的内部绑定是关闭的(从组件外部不可见)，你必须使用defineExpose(参见docs)使它们从外部可见。就像这样:

<script setup lang="ts">
const method1 = () => { ... };
const method2 = () => { ... };

defineExpose({
  method1,
  method2,
});
</script>

自

默认情况下关闭正在使用的组件

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

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

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

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

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

import myComponent from './MyComponent'

然后调用mycomponent的任何方法

myComponent.methods.doSomething()