今天在写后台的时候，遇到一个问题，页面是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>
