在vue中，组件通常可以通过props属性来传递数据，但是，有时候我们需要在不相干的组件之间传递数据。
例如，我们可能需要将一个组件的数据传递给另一个组件，但是这两个组件可能没有任何联系。在这种情况下，我们可以使用Vue的事件系统来实现非父子组件之间的通信。具体来说，我们可以使用Vue中的$on和$emit方法来发送和接收事件。
$on方法用于在当前组件中注册一个自定义事件，当事件触发时，当前组件可以执行相应的操作。$emit方法用于触发一个自定义事件，并将指定参数传递给所有监听该事件的组件。
示例如下：
<!-- 组件A -->
<template>
<div>
<!-- 触发事件 -->
<button @click="sendDataToB">传递数据给组件B</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToB() {
// 发送事件
this.$emit('sendData', '这是来自组件A的数据')
}
}
}
</script><!-- 组件B -->
<template>
<div>
<!-- 监听事件并接收数据 -->
<div>收到的数据：{{ receivedData }}</div>
</div>
</template>
<script>
export default {
data() {
return {
receivedData: ''
}
},
mounted() {
// 监听事件
this.$on('sendData', (data) => {
this.receivedData = data
})
}
}
</script>在这个示例中，我们在组件A中注册了一个名为“sendData”的自定义事件，并在其中使用$emit方法触发该事件。$emit方法会将“这是来自组件A的数据”的字符串作为参数传递给所有监听该事件的组件。
立即学习“前端免费学习笔记（深入）”；
在组件B中，我们在mounted生命周期钩子中使用$on方法监听事件“sendData”，并在响应函数中更新组件B的数据receivedData。此时，组件B就可以接收从组件A中传递过来的数据了。
需要注意的是，非父子组件之间的通信需要使用专门的事件系统来实现，这样可以避免组件之间无限套娃而导致代码难以维护。因此，在实际开发中，我们应该尽量将组件之间的通信限制在父子组件之间。
