1、在vue项目中新建一个js文件(文件名:bus.js)
import Vue from 'vue'
export default new Vue();
2、在需要传值的页面引用并开始传参
<script>
import Bus from '../plugins/bus' //路径找到刚刚创建的bus.js
export default {
data(){
return{
value:''
}
},
methods:{
sum(){
Bus.$emit('summ',this.value) //用Bus.$emit()来传值
}
}
}
</script>
使用Bus.$emit()来进行传值
Bus.$emit() 第一个参数为传参的名字 第二个参数为传参值
3、获取传参的值
<script>
import Bus from '../plugins/bus' //路径找到刚刚创建的bus.js
export default {
data(){
return{
value:''
}
},
created(){ //在created中使用
Bus.$on('summ',(data)=>{ //使用summ的值
this.value = data
})
}
}
</script>
用Bus.$on()来接收参数
Bus.$on() 第一个参数为接收的参数名 ,第二个为匿名函数,data表示接收的值
4、查看效果,可以实现兄弟组件之间传值,实时更新数据了