Vue有关子组件向父组件传值问题(已解决)

简介: Vue有关子组件向父组件传值问题(已解决)
今天在写后台的时候,遇到一个问题,页面是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>


相关文章
|
1天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
7 1
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
7 1
|
1天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
7 0
|
1天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
8 0
|
JavaScript
Vue中父组件与子组件之间的通信
Vue中父组件与子组件之间的通信
185 0
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
10 2
|
2天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
17 1
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
6 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
3天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
17 1
|
3天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
11 1