Vue有关子组件向父组件传值问题（已解决）

最新推荐文章于 2024-05-12 16:57:45 发布

还算善良_

最新推荐文章于 2024-05-12 16:57:45 发布

阅读量721

点赞数

分类专栏： vue 记录文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46522411/article/details/126245843

版权

记录同时被 2 个专栏收录

109 篇文章 2 订阅

订阅专栏

vue

23 篇文章 0 订阅

订阅专栏

今天在写后台的时候，遇到一个问题，页面是tab进行切换的，然后很多类似的代码，于是我这边就抽出一个单独的页面进行编写，但是后面写完之后，需要根据子组件的筛选条件进行表单数据的渲染，查了有关资料，完美解决：以下是解决方案：

父组件

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="全部" name="all">
        <all :receive="receive"></all>
      </el-tab-pane>
      <el-tab-pane label="签署中" name="sign">
        <sign :receive="receive"></sign>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="comple">
        <comple :receive="receive"></comple>
      </el-tab-pane>
      <el-tab-pane label="即将截至签署" name="cutOff">
        <cutOff :receive="receive"></cutOff>
      </el-tab-pane>
    </el-tabs>
  methods: {
    //接受子组件传来的搜索条件
    receive(searchInfo) {
      console.log("this.$refs.allInfo:", searchInfo);
      //todo逻辑操作
    },
   }

子组件

<template>
  <el-card class="box-card">
        <el-form-item label="生效日期" v-show="showSearch">
          <el-date-picker
            v-model="form.effectivetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到期日期" v-show="showSearch">
          <el-date-picker
            v-model="form.expiretime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00']"
          >
          </el-date-picker>
        </el-form-item>
  </el-card>
</template>
<script>
export default {
  name: "all",
  props: ["receive"],//接受父组件定义的变量
  data() {
    return {
      form: {
        status:"",
        effectiveStartTime: "",
        effectiveEndTime: "",
        expiryStartTime: "",
        expiryEndTime: "",
      },
      showSearch: false,
    };
  },
  created() {},
  methods: {
    handleQuery() {
      // 调用传入的函数，将name传递给父组件
      this.receive(this.form);
      //这样 父组件 在receive(){}方法中就可以获取到子组件传来的数值信息了~
    },
};
</script>