Vue踩坑之路 | 父子组件传值的几种方法

在实际的开发过程中，真的是一步一个坑，总结了下，其实是两方面的原因：

自己基础不牢固，js写的不熟练
vue的文档没有读透，很多东西模棱两可

在开发过程中，涉及到了一个预览功能，需要把父组件输入的值传递到子组件去展示，刚开始怎么都不理解，把路由传值和注册组件混在了一起使用，导致一直传值失败。后经过小伙伴的指导，才理解了几种传值方法的差异，接下来就记录一下吧。

先来说一下我的需求，在一个资讯发布界面，输入的内容需要在下个界面显示出来，类似预览功能：

方法一：router.push(location, onComplete?, onAbort?)

在Vue实例内部，你可以通过$router访问路由实例。因此你可以调用this.$router.push。

想要导航到不同的URL，则使用router.push方法，这个方法会向history栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

下面我们来看具体代码里怎么实现:

先来看routers.js文件中的实现：（在这里我们定义了路由的跳转，定义了参数和命名）

routers.js

父组件中view的绑定，以及事件的绑定处理：

这里在进行事件处理时，一定要注意：想params生效，就要用name(用别名指向到我们想跳转的url)

子组件的接收处理：
数据绑定最常见的形式：使用{{}}标签进行文本插值，{{}}标签将会被替代为对应数据的属性的值。只要绑定的数据属性发生了改变，插值处的内容都会更新。

方法二：Storage对象存储

Storage的实例与其他对象类似，有如下方法：

clear()：删除所有值；Firefox中没有实现。
getItem(name)：根据指定的名字name获取对应的值。
key(index)：获得index位置处的值的名字。
removeItem(name)：删除由name指定的名值对儿。
setItem(name, value)：为指定的name设置一个对应的值。

其中，getItem()、removeItem()和setItem()方法可以直接调用。