【5.Vue 父子组件监听数据】

1.背景

需要在父组件mounted之后把数据传给子组件，然后子组件加载时使用， 但是父组件的mounted生命周期在子组件的mounted生命周期之前，所以使用组件watch监听父组件数据的改变。

2.代码实现

2.1子组件代码

接收父组件的数据 prop

  props: {
    // div的宽高 从父级获取
    divHeightAndWidth: {},
  },
1
2
3
4

添加这个属性的监听；接收到的参数，一个是之前的数据（orderData），一个是改变后的数据（newData）。注意：监听的数据对象是Json对象的话一定要开启深度监听，不然监听不到数据。

  // 监听器
  watch: {
    divHeightAndWidth: {
      handler(orderData, newData) {
        // 监听到之后开始调用方法
        this.getCleanEqList(newData);

        this.$nextTick(() => {
          // 获取状态
          this.selectLastRecordList();
        });
      },
      deep: true, // 深度监听
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.2父组件代码

传入数据

    <cleanEquipment
        :divHeightAndWidth="divHeightAndWidth"
        @cleanClick="cleanClick"
      >cleanEquipment>
1
2
3
4