同一页面多次引用同一组件

同一页面多次引用同一组件实现日期默认值

需求：在一个页面内引入两次form表单组件，在tab切换时，tab1默认近一周的日期，tab2默认近一个月的日期

子组件：

<template><div><el-form :inline="true" :model="form" class="demo-form-inline"><el-form-item><el-select v-model="form.time"><el-option label="近一周" value="weeks"></el-option><el-option label="近一个月" value="months"></el-option></el-select></el-form-item><el-form-item label="时间"><el-date-pickerv-model="form.value"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"></el-date-picker></el-form-item></el-form></div>
</template><script>
export default {props: {formData: Object,},data() {return {form: {time: "",value: [],},};},watch: {formData: {immediate: true,handler(val) {this.form = val;},},},methods: {},
};
</script>

父组件：

<!-- 父组件 parent.vue --><template><div><el-tabs v-model="activeName" @tab-click="handleClick" style="width: 50%"><el-tab-pane label="tab1" name="first"><p>第一次引用组件</p><FormData :formData.sync="form"></FormData></el-tab-pane><el-tab-pane label="tab2" name="second"><p>第二次引用组件</p><FormData :formData.sync="form"></FormData></el-tab-pane></el-tabs></div>
</template><script>
import FormData from "./FormData.vue";export default {components: {FormData,},data() {return {form: {time: "weeks",value: ["2022-05-11", "2022-05-18"],},activeName: "first",};},methods: {dateFormat(dateData) {var date = new Date(dateData);var y = date.getFullYear();var m = date.getMonth() + 1;m = m < 10 ? "0" + m : m;var d = date.getDate();d = d < 10 ? "0" + d : d;const time = y + "-" + m + "-" + d;return time;},handleClick() {if (this.activeName === "first") {this.form = {time: "weeks",value: [this.dateFormat(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7)),this.dateFormat(new Date()),],};} else {this.form = {time: "months",value: [this.dateFormat(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30)),this.dateFormat(new Date()),],};}},},
};
</script>

效果：

表单传值

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！