如何使用vuex實現(xiàn)兄弟組件通信
前言
vuex主要是是做數(shù)據(jù)交互,父子組件傳值可以很容易辦到,但是兄弟組件間傳值,需要先將值傳給父組件,再傳給子組件,異常麻煩。
下面這篇文章就來給大家介紹下vuex兄弟組件通信的方法,下面話不多說了,來一起看看詳細的介紹吧
1. 核心想法
使用vuex進行兄弟組件通信的核心思路就是將vuex作為一個store(vuex被設(shè)計的原因之一),將每個子組件的數(shù)據(jù)都存放進去,每個子組件都從vuex里獲取數(shù)據(jù),其實就是一句話——把vuex作為一個橋
2. 具體代碼
父組件App.vue
<template> <div id="app"> <ChildA/> <ChildB/> </div> </template> <script> import ChildA from './components/ChildA' // 導入A組件 import ChildB from './components/ChildB' // 導入B組件 export default { name: 'App', components: {ChildA, ChildB} // 注冊A、B組件 } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } div { margin: 10px; } </style>
子組件ChildA
<template> <div id="childA"> <h1>我是A組件</h1> <button @click="transform">點我讓B組件接收到數(shù)據(jù)</button> <p>因為你點了B,所以我的信息發(fā)生了變化:{{BMessage}}</p> </div> </template> <script> export default { data() { return { AMessage: 'Hello,B組件,我是A組件' } }, computed: { BMessage() { // 這里存儲從store里獲取的B組件的數(shù)據(jù) return this.$store.state.BMsg } }, methods: { transform() { // 觸發(fā)receiveAMsg,將A組件的數(shù)據(jù)存放到store里去 this.$store.commit('receiveAMsg', { AMsg: this.AMessage }) } } } </script> <style> div#childA { border: 1px solid black; } </style>
子組件ChildB
<template> <div id="childB"> <h1>我是B組件</h1> <button @click="transform">點我讓A組件接收到數(shù)據(jù)</button> <p>因為你點了A,所以我的信息發(fā)生了變化:{{AMessage}}</p> </div> </template> <script> export default { data() { return { BMessage: 'Hello,A組件,我是B組件' } }, computed: { AMessage() { // 這里存儲從store里獲取的A組件的數(shù)據(jù) return this.$store.state.AMsg } }, methods: { transform() { // 觸發(fā)receiveBMsg,將B組件的數(shù)據(jù)存放到store里去 this.$store.commit('receiveBMsg', { BMsg: this.BMessage }) } } } </script> <style> div#childB { border: 1px solid green; } </style>
vuex模塊store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { // 初始化A和B組件的數(shù)據(jù),等待獲取 AMsg: '', BMsg: '' } const mutations = { receiveAMsg(state, payload) { // 將A組件的數(shù)據(jù)存放于state state.AMsg = payload.AMsg }, receiveBMsg(state, payload) { // 將B組件的數(shù)據(jù)存放于state state.BMsg = payload.BMsg } } export default new Vuex.Store({ state, mutations })
我把所有的代碼+注釋都放在github了,源碼鏈接,預覽鏈接
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Vue中的百度地圖定位BMap.GeolocationControl的用法
BMap.GeolocationControl?是百度地圖API中的一個類,用于添加地理定位控件到地圖上,以便用戶可以通過該控件獲取自己的當前位置,本文給大家介紹Vue中的百度地圖定位BMap.GeolocationControl的用法,感興趣的朋友跟隨小編一起看看吧2023-10-10使用Vue3+ElementPlus前端實現(xiàn)分片上傳的全過程
ElementPlus是一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于Vue?3.0的組件庫,提供了配套設(shè)計資源,幫助你的網(wǎng)站快速成型,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+ElementPlus前端實現(xiàn)分片上傳的相關(guān)資料,需要的朋友可以參考下2022-11-11Vue中Axios配置不同的baseURL,請求不同的域名接口方式
這篇文章主要介紹了Vue中Axios配置不同的baseURL,請求不同的域名接口方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model的詳細
v-model 是 vue3 中的一個內(nèi)置指令,很多表單元素都可以使用這個屬性,如 input、checkbox 等,咱可以在自定義組件中實現(xiàn) v-model,這篇文章主要介紹了Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model,需要的朋友可以參考下2022-10-10