学习笔记——Vue中兄弟组件之间传值

---

在vue中，我们在使用不同组件时，可能在同一个页面使用的两个组件具有耦合性，组件之间可能会需要相互传值。以下就是三种兄弟组件之间传值的方法。

1.通过父组件传递：

// 这里我让Older组件向younger组件传值

// 父组件
<template>
	<div>
		<Older :msg-older="msgFather" @change="change"></Older>
		<Younger :msg-younger="msgFather"></Younger>
	</div>
</template>

import Older from '../../components/older';
import Younger from '../../components/younger';

<script>
    data: function() {
        return {
            msgFather: '你好，世界！',
            msgYounger: '可以'
        };
	},
    components: {
        Older,
		Younger
	},
    methods: {
        change(data) {
            this.msgYounger = data;
        }
    },
</script>

// Older组件
<span style="color: red;" v-text="msgOlder" 
      @click.self="$emit('change', 'Hello')"></span>

props: { msgOlder: String },

// Younger组件
<span v-text="msgYounger" style="color: blue;"></span>

props: { msgYounger: String }

运行结果为：点击Older组件，向Younger传值Hello：

2.使用vuex传参：

// Older组件传值给Younger组件
// 父组件
<template>
	<div>这是主页
		<Older :msg-older="msgOlder" @change="change"></Older>
		<Younger></Younger>
		<span v-text="$store.state.count"></span>
	</div>
</template>

data: function() {
    return { msgOlder: '你好，世界！'};
},
components: {
    Older,
    Younger
},

// Older组件
<span style="color: red;" v-text="msgOlder" @click.self="emitToYounger"></span>

props: { msgOlder: String },
methods: {
    emitToYounger() {
        this.$store.state.msgYounger = '发给Younger';
    }
}

// Younger组件
<span v-text="$store.state.msgYounger || '还没到'" style="color: blue;"></span>

// vuex仓库
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store =new Vuex.Store({
        state: {
                count: 0,
                msgYounger: ''
        },
        modules: {},
        getters: {},
        mutations: {},
        actions: {}
});

export default store;

运行结果为：点击Older组件，向Younger组件传值：

3.使用eventBus传值：

// 使用EventBus事件总线来进行传值

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// Older组件
<span style="color: red;" v-text="msgOlder" @click.self="emitToYounger"></span>

import { EventBus } from '../event-bus.js';
export default {
    name: 'Older',
    props: { msgOlder: String },
    methods: {
        emitToYounger() {
                EventBus.$emit('aaa', '发给Younger');
        }
    }
}

// Younger组件
<span v-text="msgYounger || '暂时的'" style="color: blue;"></span>

import { EventBus }  from '../event-bus.js';
data() {
    return {
        msgYounger: ''
    }
},

mounted() {
    EventBus.$on('aaa', (msg) => {
        this.msgYounger = msg;
    });
}

运行结果为：点击Older组件，向Younger组件中传值：

以上就是vue中兄弟组件传参的三种方式，灵活运用三种方式，可以解决许多问题。