vue3 JS 兄弟传参

在 Vue 3 中，你可以使用 props 和事件来实现兄弟组件之间的参数传递。

一种常见的方法是使用事件总线。你可以创建一个 EventBus.js 文件来实现一个简单的事件总线：

// EventBus.js

import { createApp } from 'vue';

const app = createApp({});
const eventBus = app.config.globalProperties.$eventBus = {};

export default eventBus;

然后，在发送组件中，你可以使用事件总线来发送数据：

// Sender.vue

<template>
  <button @click="sendData">发送数据</button>
</template>

<script>
import eventBus from './EventBus.js';

export default {
  methods: {
    sendData() {
      eventBus.$emit('data', 'Hello, brother!');
    }
  }
}
</script>

在接收组件中，你可以使用事件总线来接收数据：

// Receiver.vue

<template>
  <div>{{ receivedData }}</div>
</template>

<script>
import eventBus from './EventBus.js';

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

这样，当点击“发送数据”按钮时，发送组件将通过事件总线发送数据给接收组件，接收组件将更新显示的数据。