10.非父子组件之间的通信-兄弟组件间的通信

最新推荐文章于 2023-09-11 17:09:19 发布

前端星人

最新推荐文章于 2023-09-11 17:09:19 发布

阅读量318

点赞数

分类专栏： vue专栏文章标签： vue

本文链接：https://blog.csdn.net/wl516372370/article/details/106604893

版权

vue专栏专栏收录该内容

15 篇文章 0 订阅

订阅专栏

兄弟组件间的传值

一、单页面中
- 实现效果
二、单文件组件中

一、单页面中

情景：实现点击组件A中的按钮触发组件B中的数据增加，点击组件B中的按钮触发组件A中的数据增加。

const hb = new Vue();
//注册一个事件中心

<body>
<div id="app">
    <children1-item></children1-item>
    <br>
    <children2-item></children2-item>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    const hb = new Vue();//注册一个事件中心
    Vue.component('children1-item', {
        data: function () {
            return {
                childMsg1: 0
            }
        },
        template: `
            <div>
                第一个孩子的数据：{{childMsg1}}
                <button @click="changeChild1">点击增加第二个孩子的数据</button>
            </div>
        `,
        methods: {
        //这里通过 $emit “触发”了组件B的事件，并传值。
            changeChild1: function () {
                hb.$emit('children2-hb', 1)
            }
        },
        mounted() {
        //在周期函数中“监听”当前组件的一个自定义事件，并写入事件的处理逻辑
            hb.$on('children1-hb', (val) => {
                this.childMsg1 += val;
            })
        }
    })
    Vue.component('children2-item', {
        data: function () {
            return {
                childMsg2: 0
            }
        },
        template: `
            <div>
                第二个孩子的数据：{{childMsg2}}
                <button @click="changeChild2">点击增加第一个孩子的数据</button>
            </div>
        `,
        methods: {
        //这里通过 $emit “触发”了组件A的事件，并传值。
            changeChild2: function () {
                hb.$emit('children1-hb', 1)
            }
        },
        mounted() {
         //在周期函数中“监听”当前组件的一个自定义事件，并写入事件的处理逻辑
            hb.$on('children2-hb', (val) => {
                this.childMsg2 += val;
            })
        }
    });
    const vm = new Vue({
        el: '#app'
    })
</script>

</body>

实现效果

在这里插入图片描述

二、单文件组件中

1.在main.js中写入一个事件中心，并向外暴露这个事件。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

const hub =new Vue();
export default hub;

new Vue({
  render: h => h(App),
}).$mount('#app');

2.在组件 A 中 import 这个事件中心

<template>
    <div>
        组件1的数据：{{msg}}
        <button @click="handle">点击</button>
    </div>
</template>

<script>
    import hub from '../main.js'
    export default {
        name: "children1",
        data() {
            return {
                msg:0
            };
        },
        methods:{
            handle:function () {
                hub.$emit('child2-event',1)
            }
        },
        mounted(){
            hub.$on('child1-event',(val)=>{
                this.msg+=val;
            })
        }
    }
</script>

<style scoped>

</style>

2.在组件 B 中 import 这个事件中心

<template>
    <div>
        组件1的数据：{{msg}}
        <button @click="handle">点击</button>
    </div>
</template>

<script>
    import hub from '../main.js'
    export default {
        name: "children1",
        data() {
            return {
                msg:0
            };
        },
        methods:{
            handle:function () {
                hub.$emit('child2-event',1)
            }
        },
        mounted(){
            hub.$on('child1-event',(val)=>{
                this.msg+=val;
            })
        }
    }
</script>

<style scoped>

</style>