Vue3组件通信

在Vue 3中，组件之间的通信是一个非常重要的概念。组件是Vue的核心，组件间的有效沟通能够提高应用的可维护性和可扩展性。Vue 3提供了多种方式来实现组件之间的通信，以下是一些常用的方法。

1. Props 和 $emit

这是Vue中最常见的父子组件通信方式。父组件可以通过props将数据传递给子组件，子组件通过$emit向父组件发送事件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <ChildComponent :message="title" @updateMessage="updateTitle" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      title: 'Hello Vue 3!'
    };
  },
  methods: {
    updateTitle(newTitle) {
      this.title = newTitle;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="input" @input="sendUpdate" />
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      input: this.message
    };
  },
  methods: {
    sendUpdate() {
      this.$emit('updateMessage', this.input);
    }
  }
};
</script>

在这个例子中，父组件通过props传递title到子组件，子组件可以通过$emit发出updateMessage事件来更新父组件的title。

2. 使用 Event Bus

虽然在Vue 3中不再推荐使用Event Bus，但在某些场景下仍然可以考虑使用。Event Bus是一个空的Vue实例，用于在任意组件之间进行事件传递。

// eventBus.js
import { reactive } from 'vue';

const eventBus = reactive({});

export default eventBus;

<!-- ComponentA.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

export default {
  methods: {
    sendMessage() {
      eventBus.message = 'Hello from Component A';
    }
  }
};
</script>

<!-- ComponentB.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    '$eventBus.message': {
      handler(newValue) {
        this.message = newValue;
      },
      immediate: true
    }
  },
};
</script>

3. Provide / Inject

这是一个较为高级的组件通信方式。它适用于祖孙组件之间的通信，而不需要通过每一层的props传递数据。

<!-- GrandparentComponent.vue -->
<template>
  <div>
    <h1>Grandparent</h1>
    <ParentComponent />
  </div>
</template>

<script>
import { provide } from 'vue';
import ParentComponent from './ParentComponent.vue';

export default {
  components: { ParentComponent },
  setup() {
    provide('globalMessage', 'Hello from Grandparent!');
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>

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

export default {
  components: { ChildComponent }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('globalMessage');
    return { message };
  }
};
</script>

结论

Vue 3提供了多种组件间通信的方式，选择最合适的方式主要取决于组件之间的关系以及应用的需求。对于父子组件的通信，props和$emit是最常用的选择。而当需要在不相关的组件之间传递数据时，Event Bus和Provide/Inject可以提供更多灵活的解决方案。在开发中合理运用这些方式，可以大大提升开发效率和维护性。