一、组件通信(组件传值)
1.1父子组件通信
父组件
<子组件标签 :变量='要传递的数据'></子组件标签>
子组件
props:['变量']
1.2子父组件通信
父组件
<子组件标签 @自定义事件='事件名'></子组件标签>
methods:{
事件名(e){
//e就是传递过来的数据
}
}
子组件
子组件中要有一个触发事件
<button @click='toFather'></button>
methods:{
toFather(){
this.$emit('自定义事件名称','要传递的数据')
}
}
1.3非父子组件通信(兄弟组件通信)
定义一个中央事件总线(中转站)
let EventBus = new Vue()
兄弟A中
created(){}
或者
mounted(){
EventBus.$on('暗号',(d)=>{
//d就是传递过来的数据
})
}
兄弟b中
兄弟b中要有一个触发事件
<button @click='toFather'></button>
methods:{
toFather(){
EventBus.$emit('暗号','要传递的数据')
}
}
网友评论