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

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');

最后

以上就是魁梧秀发为你收集整理的vue.js几种不同页面（组件）间传值的方式的全部内容，希望文章能够帮你解决vue.js几种不同页面（组件）间传值的方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。