您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)使用vuex實(shí)現(xiàn)兄弟組件通信的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
1. 核心想法
使用vuex進(jìn)行兄弟組件通信的核心思路就是將vuex作為一個(gè)store(vuex被設(shè)計(jì)的原因之一),將每個(gè)子組件的數(shù)據(jù)都存放進(jìn)去,每個(gè)子組件都從vuex里獲取數(shù)據(jù),其實(shí)就是一句話——把vuex作為一個(gè)橋
2. 具體代碼
父組件App.vue
<template> <div id="app"> <ChildA/> <ChildB/> </div> </template> <script> import ChildA from './components/ChildA' // 導(dǎo)入A組件 import ChildB from './components/ChildB' // 導(dǎo)入B組件 export default { name: 'App', components: {ChildA, ChildB} // 注冊(cè)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"> <h2>我是A組件</h2> <button @click="transform">點(diǎn)我讓B組件接收到數(shù)據(jù)</button> <p>因?yàn)槟泓c(diǎn)了B,所以我的信息發(fā)生了變化:{{BMessage}}</p> </div> </template> <script> export default { data() { return { AMessage: 'Hello,B組件,我是A組件' } }, computed: { BMessage() { // 這里存儲(chǔ)從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"> <h2>我是B組件</h2> <button @click="transform">點(diǎn)我讓A組件接收到數(shù)據(jù)</button> <p>因?yàn)槟泓c(diǎn)了A,所以我的信息發(fā)生了變化:{{AMessage}}</p> </div> </template> <script> export default { data() { return { BMessage: 'Hello,A組件,我是B組件' } }, computed: { AMessage() { // 這里存儲(chǔ)從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了,源碼鏈接,預(yù)覽鏈接
感謝各位的閱讀!關(guān)于“使用vuex實(shí)現(xiàn)兄弟組件通信的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。