vue组件传值总结

魏晓巍

发布于 2019.11.27 20:49 阅读 762 评论 0

概述

vue作为现在前端使用的主流框架之一,组件一直是vue的核心部分。起初,我在学习vue的过程中接触到了组件之间传值的功能,但是由于在工作中使用较少,对于这一部分没有深入的认识,导致在开发过程中遇到了一些问题,通过进一步的学习,我了解到了vue组件传值的方式以及存在两类不同的组件传值方式:同级组件之间的传值、父子组件之间的传值。

同级组件之间的传值

由于vue框架本身不支持同级之间组件的跳转,所以想要实现同级组件之间的跳转并且传值,需要先引入vue-router.js路由组件,使用路由的一大好处就是可以将所有功能组件化,实现单页面应用。既然说到单页面应用,这里推荐一个前端后台方案vue-element-admin,这里不做过多讲解了。

目前我是用比较多的方法是通过this.$router.push({})进行路由跳转。在使用这个方法进行跳转的时候,可以选择两种方式进行参数传递,分别是query方法和params方法。

使用param传参只能使用name进行引入,并且params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

params传递数据: