vue3组件通信

// 父组件向子组件传递数据（Props）
// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

// 子组件向父组件传递数据（事件）
// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Data from child:', data);
    }
  }
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <button @click="sendMessageToParent">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('child-event', 'Hello from Child');
    }
  }
};
</script>

// 兄弟组件通信（通过事件总线或Vuex）
// 使用事件总线
// 创建事件总线文件 eventBus.js
import { createApp } from 'vue';
const app = createApp({});

export const eventBus = app.config.globalProperties;

// 组件A (发送者)
<template>
  <div>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

<script>
import { eventBus } from './eventBus';

export default {
  methods: {
    sendEvent() {
      eventBus.$emit('custom-event', 'Hello from Component A');
    }
  }
};
</script>

// 组件B (接收者)
<template>
  <div>
    {{ receivedMessage }}
  </div>
</template>

<script>
import { eventBus } from './eventBus';

export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  created() {
    eventBus.$on('custom-event', (message) => {
      this.receivedMessage = message;
    });
  }
};
</script>