Vue2 组件通信方式详解

1. 父子组件通信（Props）

2. 子父组件通信（$emit）

3. 兄弟组件通信（Event Bus）

4. Vuex 状态管理

5. Provide / Inject

1. 父子组件通信（Props）

定义：

通过在父组件中使用属性（Props）传递数据给子组件。

代码示例：

父组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

子组件：

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

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

2. 子父组件通信（$emit）

定义：

通过在子组件中使用 $emit 触发自定义事件，父组件监听并响应。

代码示例：

子组件：

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

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

父组件：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(message) {
      console.log('Received message from child:', message);
    },
  },
};
</script>

3. 兄弟组件通信（Event Bus）

定义：

通过创建一个事件总线（Event Bus）来实现兄弟组件之间的通信。

代码示例：

Event Bus 文件：

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

兄弟组件1：

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

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('custom-event', 'Hello from Brother1');
    },
  },
};
</script>

兄弟组件2：

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

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

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

4. Vuex 状态管理

定义：

使用 Vuex 管理全局状态，实现任意组件之间的通信。

代码示例：

安装 Vuex：

npm install vuex --save

创建 Store 文件：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    globalMessage: '',
  },
  mutations: {
    setGlobalMessage(state, message) {
      state.globalMessage = message;
    },
  },
});

使用 Vuex 的组件1：

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.commit('setGlobalMessage', 'Hello from Vuex');
    },
  },
};
</script>

使用 Vuex 的组件2：

<template>
  <p>{{ globalMessage }}</p>
</template>

<script>
export

 default {
  computed: {
    globalMessage() {
      return this.$store.state.globalMessage;
    },
  },
};
</script>

5. Provide / Inject

定义：

通过 provide 和 inject 提供和注入属性来实现祖先和后代之间的通信。

代码示例：

祖先组件：

<template>
  <div>
    <descendant-component></descendant-component>
  </div>
</template>

<script>
import { provide } from 'vue';
import { globalMessage } from './symbols.js';

export default {
  setup() {
    provide(globalMessage, 'Hello from Ancestor');
  },
};
</script>

后代组件：

<template>
  <p>{{ ancestorMessage }}</p>
</template>

<script>
import { inject } from 'vue';
import { globalMessage } from './symbols.js';

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

Symbols 文件：

// symbols.js
import { Symbol } from 'vue';
export const globalMessage = Symbol('globalMessage');

本文由mdnice多平台发布