vue组件传值总结

概述

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

同级组件之间的传值

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

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

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

params传递数据：