VUE 组件通信、传值

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

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

this.$router.push({path:'/componentB',params:{orderId:123}});

在B组件中获取A组件传递过来的参数

this.$router.query.orderId

二、通过设置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('缓存名称'));

三、父子组件之间的传值

（一）、父组件往子组件传值props

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

//parent.vue - 父组件
<template>
  <div class="parent">

    <Child :num='num'></Child>

  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      num: 123
    };
  }
};
</script>

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

//Child.vue - 子组件
<template>
    <div class="child1">
        {{num}}
    </div>
</template>

<script>
export default {
  name: "Child",
  props: {
    num: [String, Number, Object],
    str: String
  }
};
</script>