做法
两个组件,通过点击其中一个组件改变另一个组件的值
🚀【第一步:编写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
兄弟之间传参交互讲解完了~