pinia实现兄弟组件传值

要在兄弟组件之间传递值，可以使用Vue.js提供的事件总线。事件总线是一个Vue实例，可以在应用程序的任何地方使用。

1. 创建一个事件总线

可以在main.js中创建一个Vue实例作为事件总线，然后将其导出：

// main.js
import Vue from 'vue'

export const eventBus = new Vue()

2. 发送事件

在发送组件中，可以使用事件总线将值发送给任何接收组件。

// Sender.vue
<template>
  <button @click="sendData">Send Data</button>
</template>

<script>
import { eventBus } from '@/main.js'

export default {
  methods: {
    sendData() {
      eventBus.$emit('data-sent', 'Hello from Sender')
    }
  }
}
</script>

在此示例中，当用户单击“Send Data”按钮时，会触发sendData方法，该方法使用$emit方法将数据发送到名为“data-sent”的事件通道中。

3. 接收事件

在接收组件中，可以使用事件总线侦听来自发送组件的事件。

// Receiver.vue
<template>
  <div>{{ receivedData }}</div>
</template>

<script>
import { eventBus } from '@/main.js'

export default {
  data() {
    return {
      receivedData: ''
    }
  },
  mounted() {
    eventBus.$on('data-sent', data => {
      this.receivedData = data
    })
  }
}
</script>

在此示例中，接收组件使用$on方法侦听名为“data-sent”的事件通道。当事件被触发时，回调函数将更新接收组件的数据。

请注意，接收组件必须在mounted生命周期钩子中侦听事件，因为只有在组件被挂载到DOM后才能侦听事件。

这是使用事件总线在兄弟组件之间传递值的简单方法。您还可以使用Vuex或props传递值，具体取决于应用程序的需要。