前言
兄弟組件的信息傳遞有三種方式：
1.vuex 傳遞。
會將信息公有化。
此方法可在所有組件間傳遞數據。
2.建立Vue 實例模塊傳遞數據。
Vue 實例模塊會成為共用的事件觸發器。
其通過事件傳遞的信息不回被公有化。
3.建立事件鏈傳遞數據。
一個兄弟組件通過事件將信息傳給兄弟組件共有的父組件。
父組件再將信息通過屬性傳遞給另一個兄弟組件。
若兄弟組件不是親兄弟，而是堂兄弟，也就是他們有一個共同的爺爺，那么此方法會使程序變得繁瑣。
一，vuex 傳遞數據
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 實例模塊傳遞數據
1.建立Vue 實例模塊 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>三，事件鏈傳遞數據
1.父組件 C.vue
<template> <div class="c"> <h3>事件鏈傳遞數據</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>總結
以上所述是小編給大家介紹的vue 兄弟組件的信息傳遞的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
