Vue传值

传值方法

一：父组件传子组件

当一个值要从父组件传到子组件时，子组件通过props进行接收。具体实例如下：

1.值定义在父组件中，供所有子组件共享。所以要在父组件中的data中定义值：

图中y-useraside为子组件

2.要在父组件中调用、注册、引用子组件

3.在子组件的标签上把父组件值绑定上

            <y-UserAside :userList="userList" ref="userList" @userInfos='userInfoChuanZhi'/>

4.在子组件中接收父组件传过来的值

这样就实现了父传子

二：子组件传父组件

1.子组件通过$emit（用来触发事件）方法传递参数

子组件：

父组件：

其中的@userInfos出发了父组件的一个方法，然后执行相应的操作

resData就是从子组件传递过来的数据

三：兄弟组件之间的传值

vue中并没有直接的兄弟组件中的传参方法，如果可以，尽量写在同一组件中。如果确实需要，我们可以通过子传父传子的方法进行传值。

当然我们也可以通过使用Vuex进行传值

四：页面跳转之间的传值

4.1通过路由带参数进行传值，例：两个组件 A和B,A组件通过query把orderId传递给B组件

A组件传值写法：

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

B组件取值写法：

this.$route.query.orderId

**传参的方式又分为**查询参数**query（+path）和*命名路由*params(+name)两种方式:

• 命名路由搭配params，刷新页面参数会丢失

• this.$router.push({ name: 'news', params: { userId: 123 }})
  

• 查询参数搭配query，刷新页面数据不会丢失

this.$router.push({ path: '/news', query: { userId: 123 }});

• 接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

this.$route.params.userId
this.$route.query.userId

4.2通过设置 Session Storage缓存的形式进行传递

两个组件A和B，在A组件中设置缓存orderData

const orderData = { 'orderId': 123, 'price': 88 } 
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

B组件就可以获取在A中设置的缓存了

const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))