Study notes-transfer values between brother components in Vue

---

In Vue, when we use different components, the two components used on the same page may be coupled, and the components may need to pass values ​​to each other. The following are the methods of passing values ​​between the three sibling components.

1. Pass through the parent component:

// 这里我让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 }

The result of the operation is: Click on the Older component and pass the value Hello to Younger:

2. Use vuex to pass parameters:

// 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;

The result of the operation is: Click on the Older component and pass the value to the Younger component:

3. Use eventBus to pass values:

// 使用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;
    });
}

The result of the operation is: Click on the Older component and transfer the value to the Younger component:

The above are the three ways of passing parameters of brother components in vue. Using the three ways flexibly can solve many problems.