Vue.js 组件之间的通信模式

组件之间的通信模式

在 Vue.js 中，组件之间的通信是构建复杂应用的关键。根据组件之间的关系和需求，Vue 提供了多种通信方式。本文介绍了常见的通信模式及其详细示例。

一、父子组件通信

1. 父组件向子组件传递数据（Props）

示例：

父组件：

vue 复制代码

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

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

子组件：

vue 复制代码

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

流程图：

plaintext 复制代码

ParentComponent
    |
    |--(props: message)--> ChildComponent

2. 子组件向父组件发送消息（自定义事件）

示例：

子组件：

vue 复制代码

<template>
  <div>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childEvent', 'Data from Child');
    }
  }
};
</script>

父组件：

vue 复制代码

<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  methods: {
    handleChildEvent(data) {
      console.log(data);
    }
  }
};
</script>

流程图：

plaintext 复制代码

ChildComponent
    |
    |--($emit: childEvent)--> ParentComponent

二、兄弟组件通信

1. 通过事件总线（Event Bus）

示例：

创建事件总线：

javascript 复制代码

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

兄弟组件 A：

vue 复制代码

<template>
  <div>
    <button @click="sendMessage">Send Message to Sibling</button>
  </div>
</template>

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

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

兄弟组件 B：

vue 复制代码

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

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

流程图：

plaintext 复制代码

SiblingA
    |
    |--($emit: messageEvent)--> EventBus
                                      |
                                      |--($on: messageEvent)--> SiblingB

三、跨层级组件通信

1. 通过 Provide 和 Inject

示例：

祖先组件：

vue 复制代码

<template>
  <div>
    <ChildComponent />
  </div>
</template>

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

export default {
  provide: {
    sharedData: 'Data from Ancestor'
  },
  components: {
    ChildComponent
  }
};
</script>

后代组件：

vue 复制代码

<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

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

流程图：

plaintext 复制代码

AncestorComponent
    |
    |--(provide: sharedData)--> DescendantComponent

四、全局状态管理

1. 通过 Vuex

示例：

创建 Vuex Store：

javascript 复制代码

// 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, payload) {
      state.message = payload;
    }
  }
});

组件 A：

vue 复制代码

<template>
  <div>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['updateMessage']),
    changeMessage() {
      this.updateMessage('New message from Component A');
    }
  }
};
</script>

组件 B：

vue 复制代码

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  }
};
</script>

流程图：

plaintext 复制代码

ComponentA
    |
    |--(commit: updateMessage)--> Vuex Store
                                      |
                                      |--(state: message)--> ComponentB

总结

父子组件通信 ：使用 props 和自定义事件。
兄弟组件通信：使用事件总线（Event Bus）。
跨层级组件通信 ：使用 provide 和 inject。
全局状态管理：使用 Vuex。

根据具体的应用场景，选择合适的通信方式可以提高开发效率和代码可维护性。