Vue组件间、页面之间的传值

一.组件传值

1.类似以下代码，向DriverInfoList组件传入driverInfoData数据，组件中通过driverInfoList去接收

<DriverInfoList :driverInfoList="driverInfoData" ></DriverInfoList>

在组件中使用props去接收传入的数据，使用watch监听字段变化，然后赋值给data中的数据

props: {
    // 列表数据
    driverInfoList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      listData: this.driverInfoList
    };
  },
  watch: {
    driverInfoList (val) {
      handler: function (val, oldVal) {
        this.listData = val;
      },
      deep: true
    }
  }

2. driverItemClick事件是由组件内部传回来的事件，同时也可以携带参数回来

// 组件内部将事件传递回去
methods: {
  driverItemClick (supplierDriverId,index) {
    if (this.fromType === 'vehicleManage') {
      this.$emit('driverItemClick', supplierDriverId);
    } else {
      this.$emit('driverItemClick', index);
    }
  }
}

组件外部通过事件名字接收事件以及参数

<DriverInfoList @driverItemClick="driverItemClick()"></DriverInfoList>

// 在methods方法中实现事件
methods: {
  driverItemClick (index) {
    this.driverInfoData[index].isSelect = !this.driverInfoData[index].isSelect;
  }
}

二.Vue页面之间的传值

1.传值给下级页面

第一种：传递简单的字符串。可以直接在url上拼接字符串

// 传递页面
this.utils.toUrl("/pages/user/vehicle-manage/add-vehicle/index?type=1");

this.utils.toUrl(`/pages/user/vehicle-manage/vehicle-detail/index?cartId=${cartId}` );

// 接收页面
const cartId = this.$mp.query.cartId;

第二种：传递对象。需要转码 encodeURIComponent

// 传递页面
this.utils.toUrl(
        "/pages/user/vehicle-manage/add-driver/index?item=" +
          encodeURIComponent(JSON.stringify(item))
      );

// 接收页面
onLoad: function (option) {
    if (option.item) {
      // 编辑司机
      const item = JSON.parse(decodeURIComponent(option.item));
      this.isUpdate = true;
      this.params.name = item.name;
      this.params.idNumber = item.idNumber;
      this.params.phone = item.phone;
      this.params.supplierDriverId = item.supplierDriverId;
    }

    this.fromType = this.$mp.query.type;
  }

2.向上级页面传值

直接更改上级页面的值

const pages = getCurrentPages();
 // 上一个页面
const prevPage = pages[pages.length - 2];
prevPage.$vm.isUpdateDriverList = true;