溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
兄弟組件的信息傳遞有三種方式：
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">
<h4>A 模塊</h4>
<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">
<h4>B 模塊</h4>
<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">
<h4>A 模塊</h4>
<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">
<h4>B 模塊</h4>
<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">
<h4>事件鏈傳遞數據</h4>
<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">
<h4>A 模塊</h4>
<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">
<h4>B 模塊</h4>
<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 兄弟組件的信息傳遞的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
