抽奖
vue兄弟组件传值三种方法总结
在vue开发中总会遇到组件传值问题,今天总结一下兄弟组件之间的传值方法。
1、子传父,父传子
2、vuex
3、eventBus
接下来介绍如何使用eventBus实现兄弟组件传值
首先我的需求是这样的,页面上由top,left,main,bottom四个组件构成。需要将top中的值传到left中。
image
第一步:创建一个eventBus.js文件,位置我是放在了src目录下utils
import Vue from 'vue' const Bus = new Vue() export default Bus
第二步:在top组件中,引入刚才的js
import Bus from '@/utils/eventBus.js'
然后在methods里边定义一个函数
methods:{ changesize(){ Bus.$emit('add',this.arg) } }
我测试用的是button点击触发changesize函数,然后将arg传出去
第三步:在left组件中也先让引入eventBus.js,然后使用created生命周期函数
created(){ Bus.$on('add',(message)=>{ //一些操作,message就是从top组件传过来的值 console.log(message) }) },
评论0
赞1
抽奖
1赞2赞
赞赏
更多好文