封装element的日期组件

需求：点击左右箭头，日期上一天和下一天的切换

DatePicker.vue

<template> <div> <el-form-item> <el-button type="primary" size="mini" @click="dateChange(0)"> <i class="el-icon-caret-left"></i> </el-button> <el-date-picker style="width:140px" v-model="date" type="date" size="small" placeholder="选择日期" ></el-date-picker> <el-button type="primary" size="mini" @click="dateChange(1)"> <i class="el-icon-caret-right"></i> </el-button> </el-form-item> </div> </template> <script> export default { data() { return { date: new Date(), }; }, methods: { dateChange(flag) { let date = this.date; if (flag == 1) { this.date = new Date(date.setDate(date.getDate() + 1)); } else { this.date = new Date(date.setDate(date.getDate() - 1)); } }, } }; </script> <style scoped> </style>

父组件

<script> import DatePicker from "./../../components/DatePicker.vue"; //1.导入该组件 export default { data() { return { tableData: [], total: 0, page: 1, listLoading: false, dialogVisible: false, size: 10, }; }, components: {DatePicker}, //2.注册组件 <el-form :inline="true"> <el-form-item>数据管理</el-form-item> <el-form-item> <date-picker></date-picker> //3.使用该组件，注意名字 </el-form-item> </el-form>

父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref

<date-picker ref="datePicker"></date-picker>

2.在父组件里面通过

this.$refs.datePicker.属性 this.$refs.datePicker.方法

子组件里面获取父组件的数据和方法

this.$parent.属性 this.$parent.方法