vue 兄弟組件的信息傳遞的方法實(shí)例詳解
前言
兄弟組件的信息傳遞有三種方式:
1.vuex 傳遞。
會(huì)將信息公有化。
此方法可在所有組件間傳遞數(shù)據(jù)。
2.建立Vue 實(shí)例模塊傳遞數(shù)據(jù)。
Vue 實(shí)例模塊會(huì)成為共用的事件觸發(fā)器。
其通過事件傳遞的信息不回被公有化。
3.建立事件鏈傳遞數(shù)據(jù)。
一個(gè)兄弟組件通過事件將信息傳給兄弟組件共有的父組件。
父組件再將信息通過屬性傳遞給另一個(gè)兄弟組件。
若兄弟組件不是親兄弟,而是堂兄弟,也就是他們有一個(gè)共同的爺爺,那么此方法會(huì)使程序變得繁瑣。
一,vuex 傳遞數(shù)據(jù)
1.安裝vuex
npm install vuex --save
2.store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store=new Vuex.Store({ state:{ msgFromA:'A 還沒說話', msgFromB:'B 還沒說話' }, getters:{ }, mutations:{ msgAChange(state,msg){ state.msgFromA=msg; }, msgBChange(state,msg){ state.msgFromB=msg; }, } })
3.子組件A.vue
<template> <div class="a"> <h3>A 模塊</h3> <p>B 說:{{msgFromB}}</p> <button @click="aSay">A 把自己的信息傳給B</button> </div> </template> <script> export default { data () { return { msg:'我是A', } }, methods:{ aSay(){ this.$store.commit('msgAChange', this.msg); } }, computed: { msgFromB() { return this.$store.state.msgFromB; } } } </script>
4.子組件B.vue
<template> <div class="b"> <h3>B 模塊</h3> <p>A 說:{{msgFromA}}</p> <button @click="bSay">B 把自己的信息傳給A</button> </div> </template> <script> export default { data () { return { msg:'我是B' } }, methods:{ bSay(){ this.$store.commit('msgBChange', this.msg); } }, computed: { msgFromA() { return this.$store.state.msgFromA; } } } </script>
二,Vue 實(shí)例模塊傳遞數(shù)據(jù)
1.建立Vue 實(shí)例模塊 bus.js
import Vue from 'vue' export default new Vue();
2.子組件 A.vue
<template> <div class="a"> <h3>A 模塊</h3> <p>B 說:{{msgFromB}}</p> <button @click="aSay">A 把自己的信息傳給B</button> </div> </template> <script> import Bus from '../util/Bus' export default { data () { return { msg:'我是A', msgFromB:'B 還沒說話', } }, created(){ let _this=this; Bus.$on('msgBChange',function(dt){ _this.msgFromB=dt; }) }, methods:{ aSay(){ Bus.$emit('msgAChange',this.msg); } } } </script>
3.子組件 B.vue
<template> <div class="b"> <h3>B 模塊</h3> <p>A 說:{{msgFromA}}</p> <button @click="bSay">B 把自己的信息傳給A</button> </div> </template> <script> import Bus from '../util/Bus' export default { data () { return { msg:'我是B', msgFromA:'A 還沒說話' } }, created(){ let _this=this; Bus.$on('msgAChange',function(dt){ _this.msgFromA=dt; }) }, methods:{ bSay(){ Bus.$emit('msgBChange',this.msg); } } } </script>
三,事件鏈傳遞數(shù)據(jù)
1.父組件 C.vue
<template> <div class="c"> <h3>事件鏈傳遞數(shù)據(jù)</h3> <appA :msg-from-b="msgFromB" v-on:msg-a-change="aSay"></appA> <appB :msg-from-a="msgFromA" v-on:msg-b-change="bSay"></appB> </div> </template> <script> import A from '../a3/A' import B from '../b3/B' export default { data () { return { msgFromA:'A 還沒說話', msgFromB:'B 還沒說話' } }, methods:{ aSay(msg){ this.msgFromA=msg; }, bSay(msg){ this.msgFromB=msg; }, }, components:{ appA:A, appB:B, } } </script>
2.子組件 A.vue
<template> <div class="a"> <h3>A 模塊</h3> <p>B 說:{{msgFromB}}</p> <button @click="aSay">A 把自己的信息傳給B</button> </div> </template> <script> export default { data () { return { msg:'我是A', } }, methods:{ aSay(){ this.$emit('msg-a-change', this.msg) } }, props: ['msgFromB'], } </script>
3.子組件 B.vue
<template> <div class="b"> <h3>B 模塊</h3> <p>A 說:{{msgFromA}}</p> <button @click="bSay">B 把自己的信息傳給A</button> </div> </template> <script> import Bus from '../util/Bus' export default { data () { return { msg:'我是B', } }, methods:{ bSay(){ this.$emit('msg-b-change', this.msg) } }, props: ['msgFromA'], } </script>
總結(jié)
以上所述是小編給大家介紹的vue 兄弟組件的信息傳遞的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
運(yùn)行npm?run?dev報(bào)錯(cuò)的原因及解決
剛剛創(chuàng)建好vue項(xiàng)目的時(shí)候,運(yùn)行 npm run dev 會(huì)報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于運(yùn)行npm?run?dev報(bào)錯(cuò)的原因及解決方法,需要的朋友可以參考下2022-10-10vue通過指令(directives)實(shí)現(xiàn)點(diǎn)擊空白處收起下拉框
這篇文章主要介紹了vue通過指令(directives)實(shí)現(xiàn)點(diǎn)擊空白處收起下拉框,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12分分鐘學(xué)會(huì)vue中vuex的應(yīng)用(入門教程)
本篇文章主要介紹了vue中vuex的應(yīng)用(入門教程),詳細(xì)的介紹了vuex.js和應(yīng)用方法,有興趣的可以了解一下2017-09-09django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios
這篇文章主要介紹了django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-05-05Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法大全
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)解決方法的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼
某些應(yīng)用場(chǎng)景會(huì)給點(diǎn)擊事件添加權(quán)限,不存在權(quán)限就攔截點(diǎn)擊事件,有權(quán)限就繼續(xù)正常觸發(fā)點(diǎn)擊事件。這樣的效果是如何實(shí)現(xiàn)的呢,本文就來和大家詳細(xì)講講2023-02-02Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例
最近在學(xué)習(xí)前段后分離,本文介紹了Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2021-11-11