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

野性酷女 2022-11-21 04:08 2124阅读 0赞

--------------------

> 在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 }

**运行结果为：**![20201030110112349.png][]**点击Older组件，向Younger传值Hello：**![20201030110133683.png][]

### **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;

运行结果为：![20201030112811201.png][]点击Older组件，向Younger组件传值：![20201030112856714.png][]

### 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;
        });
    }

运行结果为：![20201030135234870.png][]点击Older组件，向Younger组件中传值：![20201030135313514.png][]

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

[20201030110112349.png]: https://img-blog.csdnimg.cn/20201030110112349.png
[20201030110133683.png]: /images/20221120/1fa43e6d416a49cda4d613c3a10a227e.png
[20201030112811201.png]: https://img-blog.csdnimg.cn/20201030112811201.png
[20201030112856714.png]: /images/20221120/d6904bb1eec341e6b5b6c11a7f29cfbc.png
[20201030135234870.png]: https://img-blog.csdnimg.cn/20201030135234870.png
[20201030135313514.png]: /images/20221120/9878235f76634cc4ac5499ad20e0fc94.png