vue.js几种不同页面（组件）间传值的方式

最新推荐文章于 2025-09-03 16:27:49 发布

原创最新推荐文章于 2025-09-03 16:27:49 发布 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js页面传参

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

Vue.js

16 篇文章

订阅专栏

本文介绍了Vue.js页面传参的几种方式。一是路由传值，使用params传值刷新页面参数会消失，query则不会，<router-link>标签也可传参，但url会变长且非路由跳转界面无法使用；二是用$parent、$children等方法调取层级组件数据和方法，较灵活但耦合性强；三是通过eventBus传递数据，需全局定义并在组件中发送和接收。

1. 路由传值

在跳转页面的时候，在js代码中的操作如下。

传参页面：

this.$router.push({
						name: 'originality',
						query: {
							parm: selectMainPicUrl
						}
					});

需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。

或者在标签中使用<router-link>标签

<router-link 
    :to="{
        path: 'yourPath', 
        params: { 
            name: 'name', 
            dataObj: data
        },
        query: {
            name: 'name', 
            dataObj: data
        }
    }">
</router-link>

接收参数的页面：

var str = this.$route.query.parm;

这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用。

2. $parent,$chlidren等方法调取用层级关系的组件内的数据和方法

this.$parent.$data.id  //获取父元素data中的id
this.$children.$data.id  //获取父元素data中的id

这样用起来比较灵活，但是容易造成代码耦合性太强，导致维护困难

3. 通过eventBus传递数据

使用前可以在全局定义一个eventBus

window.eventBus = new Vue();

在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象）

eventBus.$emit('eventBusName', id);

在需要接受参数的组件重，用on接受该值（或对象）

//val即为传递过来的值
eventBus.$on('eventBusName', function(val) {
    console.log(val)
})

最后记住要在beforeDestroy()中关闭这个eventBus

eventBus.$off('eventBusName');