[Vue]组件之间传值

1.父组件与子组件传值props

定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多，推荐使用json数组{}的形式

定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。

2.子组件向父组件传递数据

子组件通过$emit方法传递参数

子组件部分:

3.子组件向子组件传递数据

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。

为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递

4.画面迁移的组件之间传递数据

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

A组件传值写法：

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

      B组件取值写法：

this.$route.query.orderId

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(‘缓存名称‘))

[Vue]组件之间传值

原文：https://www.cnblogs.com/vickylinj/p/10877765.html