vue项目给子组件传值

最新推荐文章于 2023-02-01 14:37:41 发布

多秋浮沉度华年

最新推荐文章于 2023-02-01 14:37:41 发布

阅读量318

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/webshao/article/details/104007999

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1：首先引入子组件

import audit from "@/view/leaveApplyManage/modal/audit.vue";

2：定义子组件

  components: {
    audit
  },

3:定义属性


   //查看
    onDtls(row) {
      this.auditModalShow = true;
      this.modalId = row.stu_id;
      this.rowId = row.id;
      this.auditPath = row.cur_audit_ins_node_path;
    }

4:在子组件标签中传值

    <Modal
      loading
      v-model="auditModalShow"
      footer-hide
      class="auditModal"
      title="学员详情"
      width="90%"
      scrollable
      fullscreen
      mask-closable
    >
      <audit
        :str="modalId"
        :rowId="rowId"
        :auditPath="auditPath"
        v-on:cancel="auditModalShow=false"
        v-on:success="auditSuccess"
      ></audit>
    </Modal>

5:子组件通过props来接收

export default {
  props: ["str", "rowId", "auditPath"],

6::在watch中监听新值和旧值的变化

  watch: {
    str: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.auditId = newVal;
          this.getList(newVal);
          this.UploadFile(newVal);
        }
      }
    },
    rowId: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.rowId = newVal;
        }
      }
    },
    auditPath: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.auditPath = newVal;
          this.okPath(this.auditPath);
        }
      }
    }
  },

7:在需要的地方使用就可以了