一、通过路由带参数进行传值

1. 两个组件 A和B,A组件通过query把id传递给pageB组件（触发事件可以是点击事件、钩子函数等）

    this.$router.push({ path: '/pageB', query: { id: 1 } }) // 跳转到pageB
    // query:传值会将值放在路由之后
    // params:传值不会将值放在路由之后

2. 在pageB组件中获取A组件传递过来的参数

    this.$route.query.id //query传值
    this.$route.params.id // params传值

注意：这里是$route而不是$router

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

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

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

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

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

此时 dataB 就是数据 orderData
至于sessionStorage和localStorage的区别,我也有文章说明它们区别
localStorage和sessionStorage区别

三、父子组件之间的传值

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

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

    <template>
        <div class="parent">
            // 例如传递数字1给childres组件（childres为子组件）
            <childres number=1></childres>
        </div>
    </template>
    <script>
     // 引入组件
     import childres from 'components/childres'
     export default {
         components: {
            childres: childres  //习惯这么写，也可以直接childres
         }
     }  
    </script>

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

    // childres.vue
    <template>
        <div class="childres">
            // 显示父组件传递过来的值，显示1
            {{ number }}
        </div>
    </template>
    <script>
     export default {
        // 限制父组件传递过来的数据类型，如果不符合会报错 
        props: {
            'number':[Number, String, Object],
            'String':[String],
            //.... 可以传递多个值，用,隔开
        }
     }  
    </script>

当然也可以简单一点，如果不考虑数据类型，直接 props:[‘Number’,’String’]就可以了,中括号包裹，多个值使用,分隔。

2. 子组件向父组件传值通过emit事件

创建Child.vue

<template>
    <div>
        <button @click="add">点击</button>
        <!-- 子组件通过触发emit给父组件传递数据 -->
    </div>
</template>

创建parant.vue

<template>
    <div>
        <span>{{num}}<span>
        <Child @emitEvent= "setNum"></Child> // @emitEvent是子组件定义的方法, setNum是父组件的一个方法
        <!-- 触发父组件的一个方法，然后拿到子组件传过来的值，再做其他操作 -->
    </div>
</template>