参考:vue通信、传值的多种方式(详细)
Vue组件通信中eventBus的使用
1、通过路由带参数进行传值
- 两个组件 A和B,A组件通过query把orderId传递给B组件:
this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B
- 在B组件中获取A组件传递过来的参数:
this.$route.query.orderId
2、通过设置 Session Storage缓存的形式进行传递
- 两个组件A和B,在A组件中设置缓存orderData:
const orderData = { 'orderId': 123, 'price': 88 }; sessionStorage.setItem('缓存名称', JSON.stringify(orderData))
- B组件就可以获取在A中设置的缓存了:
const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))
3、父子组件之间的传值
(1)父传子props
- 定义父组件
- 定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错
注意:父子组件传值,数据都是异步请求,有可能数据渲染时报错。
原因:异步请求时,数据还没有获取到但是此时已经渲染节点了
**解决:**可以在 父组件需要传递数据的节点加上 v-if = false
,异步请求获取数据后,v-if = true
(2)子组件往父组件传值,通过emit事件
4、不同组件传值,通过eventBus
实现途径:在要相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。
举例:click组件和show组件为兄弟组件,实现click组件中触发点击事件后,由show组件将点击的是哪个dom元素console出来
- 首先,给click组件添加点击事件,定义方法:doClick()
- 新建js文件,创建eventBus,在click和show组件中import
- 在doClick()中,触发一个事件
- 在show组件中的created()钩子中调用bus监听这个事件,并接收参数
5、利用vuex进行传值
vuex主要做数据交互,维护公共状态或数据。