Vue2 组件通信方式详解
-
父子组件通信（Props）
-
子父组件通信（$emit）
-
兄弟组件通信（Event Bus）
-
Vuex 状态管理
-
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 多平台发布
