Vue中组件兄弟之间如何进行传参

做法

两个组件,通过点击其中一个组件改变另一个组件的值

🚀【第一步：编写HTML网页】

	<div id="app">
        <h1>
            兄弟间传值
        </h1>
        <one></one>
        <two></two>
    </div>

🚀【第二步：创建事件中心】

//事件中心[桥梁]
var hub=new Vue();

🚀【第三步：创建组件】

添加监听事件,关键词:mounted挂载完成时执行的函数

初始化vue

 	var vm=new Vue({
        el:'#app'
    })

组件1:

 //组件1 one
    Vue.component('one',{
        data:function(){
            return {
                num: 0
            }
        },
        template:
        `
        <div>
            <h3>one={{num}}</h3>    
            <button @click="update">修改two</button>
        </div>
        `,
        methods:{
            update(){
                hub.$emit('two-event',1);   //通知two+1
            }
        },
        //挂载完成
        mounted:function(){
            //监听事件
            hub.$on('one-event',(v)=>{
                this.num+=v;
            })
        }
    });

组件2:

//组件2 two
    Vue.component('two',{
        data:function(){
            return {
                num:0
            }
        },
        template:
        `
        <div>
            <h3>two={{num}}</h3>    
            <button @click="update">修改one</button>
        </div>
        `,
        methods:{
            update(){
                hub.$emit('one-event',1)//one+1
            }
        },
        //挂载完成
        mounted:function(){
            //监听事件
            hub.$on('two-event',(v)=>{
                this.num+=v;
            })
        }
    });

效果图

• 兄弟组件之间通过中间件进行传值的
• 父传子,子传父的应用在我上一篇文章中已进行讲解https://blog.csdn.net/m_xiaozhilei/article/details/123326086?spm=1001.2014.3001.5501

兄弟之间传参交互讲解完了~