一、props
对于Vue中的组件通信，子组件向父组件传递方法的常见方法是通过props。假设我们有一个父组件和一个子组件DemoChild，我们可以通过props属性将父组件的方法传递给子组件。以下是示例代码：
// 父组件
<template>
<div>
<DemoChild :doSomething="handleSomething"/>
</div>
</template>
<script>
import DemoChild from './DemoChild.vue';
export default {
components: { DemoChild },
methods: {
handleSomething() {
console.log('This is handleSomething method!');
}
}
};
</script>
// 子组件
<template>
<div @click="doSomething">Click me!</div>
</template>
<script>
export default {
props: ['doSomething']
};
</script>
在父组件中，我们通过在子组件标签上添加属性:doSomething="handleSomething"，将父组件中的方法传递给子组件。在子组件中，我们通过在props数组中声明doSomething，来接收父组件传递的方法。在子组件的模板中，通过@click监听click事件，并触发doSomething方法。这时候就会调用父组件中的handleSomething方法。
二、$emit事件
除了使用props来传递方法，Vue还提供了另一种方式：使用$emit事件。利用$emit方法，子组件可以向父组件传递事件，并携带相应的数据。以下是示例代码：
// 父组件
<template>
<div>
<DemoChild @do-something="handleSomething"/>
</div>
</template>
<script>
import DemoChild from './DemoChild.vue';
export default {
components: { DemoChild },
methods: {
handleSomething(data) {
console.log(data); // 'Hello World!'
}
}
};
</script>
// 子组件
<template>
<div @click="doSomething">Click me!</div>
</template>
<script>
export default {
methods: {
doSomething() {
this.$emit('do-something', 'Hello World!');
}
}
};
</script>
在子组件中，我们通过触发doSomething方法，并在方法中使用this.$emit('do-something', 'Hello World!')向父组件传递do-something事件，并且携带数据'Hello World!'。在父组件中，我们通过@do-something="handleSomething"捕获do-something事件，并且在handleSomething方法中读取携带的数据。
三、inject / provide
Vue还提供了一种高级的组件通信方式：通过inject / provide。当我们想要跨越多个级别的父子关系传递数据时，这种方式会非常有用。当我们在一个组件中定义了provide属性后，这个组件的子孙组件都可以注入provide属性，不管这些组件是否彼此存在父子关系。以下是示例代码：
// 父组件
<template>
<div>
<DemoChild/>
</div>
</template>
<script>
import DemoChild from './DemoChild.vue';
export default {
provide: {
doSomething: () => {
console.log('This is handleSomething method!');
}
},
components: { DemoChild }
};
</script>
// 子组件
<template>
<div @click="doSomething">Click me!</div>
</template>
<script>
export default {
inject: ['doSomething']
};
</script>
在父组件中，我们在provide属性中定义了一个名为doSomething的方法。子组件DemoChild可以通过inject属性来注入doSomething属性，并在子组件模板中使用@click监听click事件，并调用注入的doSomething方法。
四、事件总线
事件总线是一种非常灵活的组件通信方式，它可以支持任何组件之间的通信。Vue.js提供了一个全局事件总线Vue.prototype.$bus。任何Vue实例都可以通过this.$bus.$emit()来触发一个事件，也可以通过this.$bus.$on()来监听一个事件。以下是示例代码：
// 事件总线实例
import Vue from 'vue';
export const eventBus = new Vue();
// 父组件
<template>
<div>
<DemoChild/>
</div>
</template>
<script>
import DemoChild from './DemoChild.vue';
export default {
components: { DemoChild },
mounted() {
this.$bus.$on('handle-something', this.handleSomething);
},
beforeDestroy() {
this.$bus.$off('handle-something', this.handleSomething);
},
methods: {
handleSomething() {
console.log('This is handleSomething method!');
}
}
};
</script>
// 子组件
<template>
<div @click="doSomething">Click me!</div>
</template>
<script>
import { eventBus } from '@/event-bus.js';
export default {
methods: {
doSomething() {
eventBus.$emit('handle-something');
}
}
};
</script>
在父组件中，我们通过this.$bus.$on('handle-something', this.handleSomething)监听名为handle-something的事件，并且在事件触发时，调用handleSomething方法。在子组件中，我们通过eventBus.$emit('handle-something')触发handle-something事件。事件总线可以说是Vue组件通信中最灵活的一种方式，但也需要注意事件名称不要重复，否则会影响其他组件的正常工作。
