vue弹出层，弹出层带着父组件参数网络请求

父组件，点击循环中的图片，响应事件：

         <div v-for="(order,index) in orders" :key="index" class="col">
          //……
            <img
              class="card-item__img"
              @click="clickEach(order.wxId)"
              :src="`https://www.网址.cn//${order.goodImg}`"
            />
          //……
         </div>

    // 单击每个图片，弹出每个订单的详情
    clickEach: function(value) {
      let that = this;

      that.orderDetailLayer = true;
      that.dialogOption = {
        wxId: value,
        title: "订单",
        text: "订单详情",
        cancelButtonText: "取消",
        confirmButtonText: "确认"
      };
    },


    // 接收子组件回调的值，关闭子组件
    childRe: function(value) {
      let that = this;
      // 关闭子组件
      that.orderDetailLayer = false;
    },

在子组件中，并没有在mounted()发起网络请求，因为这时候传递的参数还获取不到：

<script>
export default {
  name: "dialog",
  //接受父组件传递值
  props: {
    dialogOption: Object
  },
  data() {
    return {
      orders: {}
    };
  },
  mounted() {},
  computed: {
    modal: function() {
      let options = this.dialogOption;
      return {
        wxId: options.wxId,
        title: options.title || "提示",
        text: options.text || "",
        cancelButtonText: options.cancelButtonText
          ? options.cancelButtonText
          : "取消",
        confirmButtonText: options.confirmButtonText
          ? options.confirmButtonText
          : "确定"
      };
    }
  },
  watch: {
    //观察到modal发生变化，便是得到了参数，拿着参数去网络请求。
    modal(val) {
      let that = this;
      that.$axios
        .post("https://www.接口.com/ail", {
          orderId: val.wxId
        })
        .then(body => {
          console.log(body.data);

        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  methods: {
    submitBtn: function(value) {
      //单击确定按钮时候，响应父组件中的childRe方法，关闭子组件。
      this.$emit("childRe", value);
    },
    cancelBtn: function(value) {
      this.submitBtn(value);
    }
  }
};
</script>