vue.js - 使用vue+vue-router时兄弟组件通讯的一些疑问

问题描述

问 题

使用vue+vue-router时的一些疑问：

问题一：兄弟组件怎样传值？比如A页面与B页面是根组件的两个子组件，它们两个就是兄弟组件，那么如果想A页面跳转B页面时，将A页面的一些数据带到B页面，应该怎样做才是最好？

我的想法：1.通过路由的动态片段传值过去

router.map({
  '/user/:username': {
    component: {
      template: '<p>用户名是{{$route.params.username}}</p>'
    }
  }
})

2.让根组件做桥梁传递值
即A组件$dispatch给根组件，然后根组件收到了再$broadcast给B组件。额，想是这样想，但实现起来好像还是有点问题，A组件$dispatch根组件能收到A传过来的值没问题，但这时还是在A页面，还没切换到B页面去，那根组件在什么时机去$broadcast，B页面才能收到？

问题二：因为使用vue-router要用<router-view> 渲染匹配的组件。还是上面的A页面B页面，根组件用<div id="app"></div>表示，这时如果A页面与B页面都需要props，那怎样传递？

1.如果不使用vue-router

<div id="app">
    <A :prop-a="a"></A>
    <B :prop-b="b"></B>
</div>

这样当然是没问题很容易可以做到。
2.使用vue-router

<div id="app">
    <router-view></router-view>
</div>

问题是：这里使用了<router-view>代替了与，虽然<router-view>也可以传递props，但这样的话难道要<router-view :prop-a="a" :prop-b="b"></router-view>这样写在一起？

解决方案

1. 可以在路由的切换钩子函数中，通过transition.from拿到跳转前页面的route

2. 通过props

3. 没有vue-router的话，在A组件beforeDestroy的时候$dispatch需要的数据，父组件接收并且在$nextTick()中$broadcast，B组件接收到数据

4. vuex

这篇关于vue.js - 使用vue+vue-router时兄弟组件通讯的一些疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！