Vue.js 组件间通信的多种方式详解 | 前端开发指南

在 Vue.js 中，组件间通信是开发复杂应用时的一个重要话题。Vue 提供了多种方式来实现组件间的通信，以下是几种常见的方式：

1. Props 和 Events

• Props：父组件通过 props 向子组件传递数据。
• Events：子组件通过 $emit 触发事件，父组件通过 v-on 监听这些事件来接收数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update', 'New message from child');
    }
  }
};
</script>

2. v-model 和 .sync 修饰符

• v-model：用于双向绑定，常用于表单输入组件。
• .sync 修饰符：简化父子组件之间的双向绑定。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value']
};
</script>

3. $refs

• $refs：用于直接访问子组件的实例或 DOM 元素。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Method called in child component');
    }
  }
};
</script>

4. $parent 和 $children

• $parent：访问父组件实例。
• $children：访问子组件实例。

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod();
    }
  }
};
</script>

5. Provide / Inject

• provide：在祖先组件中提供数据。
• inject：在子孙组件中注入数据。

<!-- AncestorComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
};
</script>

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

<script>
export default {
  inject: ['message']
};
</script>

6. Vuex

• Vuex：用于全局状态管理，适合大型应用。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('updateMessage', newMessage);
    }
  }
});

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  },
  methods: {
    updateMessage() {
      this.$store.dispatch('updateMessage', 'New message from Vuex');
    }
  }
};
</script>

7. Event Bus

• Event Bus：通过一个全局的 Vue 实例作为事件总线，实现跨组件通信。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

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

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from ComponentA');
    }
  }
};
</script>

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

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

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message', (message) => {
      this.message = message;
    });
  }
};
</script>

8. $attrs 和 $listeners

• $attrs：包含了父组件传递给子组件的所有非 props 属性。
• $listeners：包含了父组件传递给子组件的所有事件监听器。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="message" @custom-event="handleEvent" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent'
    };
  },
  methods: {
    handleEvent(payload) {
      console.log('Event received:', payload);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="$emit('custom-event', 'Event from child')">Trigger Event</button>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

9. Scoped Slots

• Scoped Slots：允许父组件向子组件传递模板内容，并且子组件可以访问父组件的数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-slot="{ message }">
    <p>{{ message }}</p>
  </ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    };
  }
};
</script>

10. Composition API

• Composition API：在 Vue 3 中引入，提供了更灵活的方式来组织和复用逻辑。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="message" @update="handleUpdate" />
</template>

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

export default {
  setup() {
    const message = ref('Hello from parent');

    const handleUpdate = (newMessage) => {
      message.value = newMessage;
    };

    return {
      message,
      handleUpdate
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  setup(props, { emit }) {
    const updateMessage = () => {
      emit('update', 'New message from child');
    };

    return {
      updateMessage
    };
  }
};
</script>

总结

Vue 提供了多种组件间通信的方式，开发者可以根据具体场景选择最合适的方式。对于简单的父子组件通信，props 和 events 是最常用的方式；对于跨层级或全局状态管理，Vuex 或 Provide/Inject 是更好的选择；而对于更复杂的逻辑复用，Composition API 提供了更灵活的方式。