Vue组件通信：使用回调函数进行组件通信
在Vue应用程序中，有时候我们需要让不同的组件之间进行通信，以便它们可以共享信息和相互协作。Vue提供了多种方式来实现组件之间的通信，其中一种常用的方式是使用回调函数。
回调函数是一种将一个函数作为参数传递给另一个函数并在特定事件发生时被调用的机制。在Vue中，我们可以利用回调函数来实现组件之间的通信，使得一个组件可以在某些事件发生时通知另一个组件并传递数据。
下面我们将通过一个示例来演示如何使用回调函数进行组件通信。
假设我们有一个父组件 Parent 和一个子组件 Child。父组件中有一个按钮，点击按钮时会触发一个事件，我们希望在按钮被点击时，子组件能够接收到通知并执行相应的操作。
首先，让我们来实现父组件 Parent。
<template>
<div>
<button @click="handleClick">点击通知子组件</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 在这里调用回调函数，将需要传递的数据作为参数传递给回调函数
this.$emit('callback', 'Hello from Parent!')
}
}
}
</script>上述代码中，我们定义了一个按钮，并在按钮的点击事件 @click 中调用了一个方法 handleClick。在这个方法中，我们通过 this.$emit 来触发了一个名为 callback 的自定义事件，并将需要传递的数据 'Hello from Parent!' 作为参数传递给回调函数。
接下来，让我们来实现子组件 Child。
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
// 监听父组件触发的自定义事件，并在触发时执行相应的操作
this.$parent.$on('callback', this.handleCallback)
},
methods: {
handleCallback(data) {
// 在这里处理父组件传递过来的数据
this.message = data
}
}
}
</script>上述代码中，我们定义了一个段落展示组件的 message 数据。在 mounted 钩子函数中，我们使用 this.$parent.$on 方法来监听父组件触发的自定义事件 callback，并在事件触发时调用对应的回调函数 handleCallback。
在 handleCallback 方法中，我们可以获取父组件传递过来的数据，并将其赋值给子组件的
.........................................................