关于vue框架的组件通信问题

学不会JS不改名字
  • 86

在进行一个组件传值不是很多的项目,想了解一下什么方法比较适合目前项目的使用,因为对vue传值这块不是很了解所以想提问看看大佬们的思路。

clipboard.png
红色框中的部分是一级路由,蓝色框中的是跳转到二级路由,想要把蓝色框中的数据传递到二级路由的界面。二级路由如下图,有三个界面都需要该数据。

clipboard.png

尝试了一下bus方法,一级路由界面方法

handleSeeSetails(row) {
    this.$router.push('/layout/secondMenu/dynamicMonitoring')
    this.$bus.emit('add-todo', {row: row});
},

二级路由‘动态监察’界面接收该数据。但是第一次跳转路由后无法获得数据,得重新返回一级路由再跳转一次到该界面才可以接收到‘row’数据。而且这么写在二级路由其他两个界面无法获取到传递的值。想请大佬帮忙看看需要怎么改,非常谢谢。

created() {
    this.$bus.on('add-todo', this.addTodo)
},

beforedestroy() {
    this.$bus.off('add-todo',this.addTodo)
},
methods: {
    addTodo(row) {
        this.list = row;
        console.log(this.list)
    }
},
评论
阅读 528
3 个回答
  • 利用vue-router进行传参,推荐使用下面这种形式
this.$router.push({
    name: '路由名称',
    params: {
    //需要传递的参数
    }
})
// 页面接受参数
this.$route.params

params也可以换成query,只不过是一个在地址栏中显示,一个不在地址栏显示

路由传参呗,params或者query

vuex吧 如果不希望重新请求直接把item整个传过去的话 不然直接路由传参带个id过去重新请求
还是直接写成父子组件传参比较方便 而不是分路由 切换tab把该tab的数据传给父组件,父组件通过prop传给下一个tab组件

宣传栏