VUE 组件通讯、传值

时间 2019-11-18

标签 vue 组件通讯繁體版

原文原文链接

1、经过路由进行带参传值：vue

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

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

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

this.$router.query.orderId

2、经过设置Session、Storage缓存的形式进行传递缓存

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

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

B组件获取在A中设置的缓存函数

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

3、父子组件之间的传值this

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

定义父组件，父组件传递num参数给子组件，若是传递的参数不少，推荐使用json数组{}的形式。code

//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中能够定义能接收的数据类型，若是不符合会报错。component

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

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