vue父子传值（仅供自己查阅）_vue路由子传父值-优快云博客

本文介绍了一个Vue.js应用程序中父子组件间的数据传递方法。包括儿子组件如何通过触发自定义事件将数据传递给父组件，以及父组件如何将数据传递给子组件。此外，还涉及了一些异步请求处理的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//儿子传给父亲
//父亲
<Child @give="accept"></Child>
data(){
    return{
      msg:[]
    }
  },
 methods: {
    accept(value) {
      this.msg=value
    }
  }
 //儿子事件
   <button @click="giveFather">传递给父组件</button>
    data() {
    return {
      close:false;
    };
  },
   methods: {
    //发送自定义事件
    giveFather() {
      this.$emit("give", this.close);
    },
  },

//父朝子传
//父亲
<HelloWorld :msg="this.msg"/>
data: function() {
    return {
      msg: "你今天快乐吗"
    };
  },
//儿子
    props: {
    msg: String,
  },

//请求
 async clickexceptionNum() {
      var PageChild2;
      if (pageNo1 > 0) {
        PageChild2 = pageNo1;
        console.log(PageChild2, "467");
      } else {
        PageChild2 = 1;
      }
      var pageSize2 = 10;

      if (pagesize > 0) {
        pageSize2 = pagesize;
      } else {
        pageSize2 = this.pageSize;
      }
      if (departmentId == []) {
        departmentId = "";
      }

      await this.$axios
        .get("/apis/hmcsAd/v2/ad/getSupervisionRecord", {
          params: {
            eId: this.searchNameStr,
            areaLayer: startDateStr,
            pageNo: endDateStr,
            pageSize: departmentId,
            pageNo: PageChild2,
            pageSize: pageSize2,
          },
        })
        .then((res) => {
          if (res.data.success) {
            if (res.data.result.records) {
              this.formatWarnData(res.data.result.records);
            } else {
              this.ceptionNum = [];
            }
          }
          this.clockTimesaaaa = res.data.result.totalCount;
          this.totalCount = res.data.result.totalCount;
       
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "暂无数据！",
          });
        });
    },

async enforcementS(e) {
      console.log(e.targetUid);
      await this.$axios({
          url: "/apis/hmcscommonapp/law_enforce/getById/" + e.relationTableId,
        params: {
          areaLayer: this.areaLayer,
          SSOID: this.SSOID,
        },
        method: "get",
      }).then((res) => {
        this.detailmessage = res.data.result;
        this.detailmessage.createTimes = moment(
          this.detailmessage.createTime
        ).format("YYYY/MM/DD/h:mm:ss");
        console.log(this.detailmessage);
        this.isImg = res.data.result.proofUrl.split(",");
        this.isImg.map((item) => {
          if (
            item.indexOf(
              "jpg" ||
                "png" ||
                "jpeg" ||
                "bmp" ||
                "gif" ||
                "webp" ||
                "psd" ||
                "svg" ||
                "tiff"
            ) != -1
          ) {
            this.arr.push({ url: item, panduan: 1 });
          } else {
            this.arr.push({ videourl: item, panduan: 2 });
          }
        });
      });

      this.dialogVisible = true;
    },