VUE 組件通訊、傳值

1、經過路由進行帶參傳值：

兩個組件A和B，A組件經過query把orderId傳遞給B組件（觸發事件能夠是點擊事件、鉤子函數等）

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

在B組件中獲取A組件傳遞過來的參數

this.$router.query.orderId

 

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('緩存名稱'));

 

3、父子組件之間的傳值

（一）、父組件往子組件傳值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>