Vue:不同页面之间的传递参数--params

一、页面之间传参

在嵌套vue-router情况下，不同页面之间传递参数可以通过params实现。而params传参分为两种情况：

首先你要确定自己要传的参数，并在控制路由的文件中的Router中path内添加对应的字段如：

{
　　path:'/paramsUrl/:name/:age/:sex',
　　component:paramsUrl
}

我要传的参数是姓名，年龄以及性别。

在你要跳转的组件内定义参数，如：

stu:{name:'Tom',age:18,sex:'male'}

同时在HTML中引入它们，通过router-link跳转（也可以通过点击事件，push()跳转）,插入对应的字段。注意：如果参数个数不同，将不会出现预期效果！

<router-link :to="{path:'/paramsUrl/'+stu.name+'/'+stu.age+'/'+stu.sex}"><button>goto paramsUrl</button></router-link>

当然，你也可以通过this.$route.params.name来获取参数

通过上面的介绍，相信你也看出来相对应的弊端~不安全。如果用户篡改url中的参数，将会出现我们不想看到的问题。那么如何避免呢？---name

上边对Router中的操作只是改了 path,现在我们在添加一个name参数。

{
　　path: '/param',
   name: 'param',
   component: param
},

这里我们通过点击事件进行跳转~

<button @click="goParam">go to param</button>

在methods中编写方法

goParam:function(){
    this.$router.push({name:'param',params:this.stu})
}

我还是比较喜欢第二种方法，不仅安全而且不用编写相对应的参数，想传什么直接在data中添加即可。

读取参数的方法同上~

1、通过props和$emit(event,params)进行传递

父组件将参数传递过来后，子组件通过props进行接收，如下：

子向父传递参数

event：表示父组件在子组件中绑定的事件名称；

params：表示你要传递的参数，可以是string，也可以是object

在子组件中通过出发this.$emit("event",params)

2、通过 $p a r e n t$

3、通过项目状态管理----vuex

　　我们在state中存放一些公共的页面状态，如userInfo

　　我们可以通过mutations以及action进行操作状态，但是他们有什么区别呢？想一想，可以留言

　　这里就不详细说了，相信大家都比较熟悉。

4、通过 $a t t r s 和listeners相结合可以实现父与孙组件之间传参$

$页面结构：$ $A->B->C$

$A->C B通过attrs拿到A值（除props），通过v-bind=“attrs”->C C->A B通过$listeners监听C触发事件，C发出的数据传给A$

5、provide和inject（多层）

　　比如当我们层级比较多的情况下，我们可能对传递参数的情况比较头疼，有的人通过vuex或者其他方式来实现，这里介绍一个好用的方式。当然，并不是说其他方式不好用

　　父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。无论子组件有多深，只要调用了inject那么就可以注入provide中的参数。而不是局限于只能从当前父组件的prop属性来获取数据，只　　要在父组件的生命周期内，子组件都可以调用。

6、eventBus实现兄弟之间的传参

　　在main.js中创建一个vue实例

Vue.prototype.EventBus = new Vue()

　　子组件A：

<button @click="EventBus.$emit('事件名称','我是兄弟组件A的参数')">传参按钮</button>

　　子组件B：

 mounted () {
    this.EventBus.$on('事件名称',(val)=>{
      console.log(val)
    })
}

好了，就写这么多了，还有其他的传参方式吗，欢迎评论区留言~

posted @ 2017-11-08 15:18 Clancey 阅读(51030) 评论(1) 编辑收藏举报

刷新页面返回顶部