在现代前端开发中,Vue.js 是一个非常受欢迎的框架,其轻量、易用和灵活的特性使得它在众多项目中被广泛应用。而在实际开发中,组件间通讯是一个常见且重要的需求。今天,我们将为你揭秘 Vue3 中组件通讯的 10+ 种方法,并附上详细的示例代码,帮助你在开发中更加得心应手。
一、父子组件通讯
1.props和$emit
示例代码:
// 父组件
<template>
<ChildComponent :message="parentMessage" @update-message="handleUpdateMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default { components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from Parent'
};
},
methods: {
handleUpdateMessage(newMessage) {
this.parentMessage = newMessage;
}
}
};
</script>// 子组件
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default { props: ['message'], methods: {
updateMessage() { this.$emit('update-message', 'Hello from Child');
}
}
};</script>二、兄弟组件通讯
2. 中央事件总线
示例代码:
// eventBus.js
import { createApp } from 'vue';
export const EventBus = createApp({});// 组件A
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import { EventBus } from './eventBus.js';
export default { methods: {
sendMessage() {
EventBus.config.globalProperties.$emit('message', 'Hello from Component A');
}
}
};
</script>// 组件B
<template>
<p>{{ receivedMessage }}</p>
</template>
<script>
import { EventBus } from './eventBus.js';
export default {
data() { return { receivedMessage: ''
};
},
mounted() {
EventBus.config.globalProperties.$on('message', (message) => {
this.receivedMessage = message;
});
}
};</script>三、跨层级组件通讯
3. provide/inject
示例代码:
// 父组件
<template>
<ChildComponent />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
provide() {
return {
sharedMessage: this.message
};
},
data() {
return {
message: 'Shared Message from Parent'
};
}
};
</script>// 子组件
<template>
<p>{{ sharedMessage }}</p>
</template>
<script>
export default { inject: ['sharedMessage']
};</script>四、Vuex 状态管理
4. Vuex
示例代码:
// store.js
import { createStore } from 'vuex';
export default createStore({
state: {
message: 'Hello from Vuex'
},
mutations: {
updateMessage(state, newMessage) {
state.message = newMessage;
}
},
actions: {
setMessage({ commit }, newMessage) {
commit('updateMessage', newMessage);
}
}, getters: { getMessage: state => state.message
}
});// 组件A
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import { useStore } from 'vuex';export default {
setup() { const store = useStore(); const sendMessage = () => {
store.dispatch('setMessage', 'Hello from Component A');
};
return { sendMessage };
}
};
</script>// 组件B
<template>
<p>{{ message }}</p></template>
<script>
import { useStore } from 'vuex';
import { computed } from 'vue';
export default {
setup() {
const store = useStore();
const message = computed(() => store.getters.getMessage);
return { message };
}
};
</script>
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表