正规的大连网站建设,WordPress搬家emlog,网站维护产品推介,政务网站建设目的 意义vue子组件修改父组件传递的变量
子组件不能直接修改父组件变量的值#xff0c;但是可以通过调用父组件的方法来修改。
实现步骤
在父组件声明变量
export default {data() {return {startTime:,......},......}
}在父组件使用子组件并传递数据#xff0c;修改…vue子组件修改父组件传递的变量
子组件不能直接修改父组件变量的值但是可以通过调用父组件的方法来修改。
实现步骤
在父组件声明变量
export default {data() {return {startTime:,......},......}
}在父组件使用子组件并传递数据修改变量
......
!-- :startValue传值editStartValue修改父组件变量方法editStartTime --
date-time-picker :startValuestartTime editStartValueeditStartTime
/date-time-picker
......export default {......methods: {editStartTime(val){this.startTimeval;}}
}
在子组件中接收值并调用父组件方法修改父组件的变量
//接收变量值
props: {startValue: {type: String,default: ,},......
}//调用父组件方法将值传给父组件
editStartValue() {this.$emit(editStartValue, 2023-08-02 00:00:00);
},以上步骤只是逻辑步骤和部分代码以下有完整代码
父组件
templatediv!-- 自定义时间组件 --date-time-picker :particleparticle :startValuestartTime :endValueendTime editStartValueeditStartTime editEndValueeditEndTime/date-time-picker/div
/templatescript
//引入子组件
import dateTimePicker from ./date-time-picker.vue;
export default {components: { dateTimePicker },data() {return {//1时间组件的时间间隔为15分钟//2时间组件的时间间隔为1小时//3时间组件只能选择日期不能选择时间particle:1,startTime:,endTime:,},methods: {editStartTime(val){this.startTimeval;},editEndTime(val){this.endTimeval;},}}
}
/script子组件
templatediv!-- 开始时间------------------------------------- --el-time-selectv-modelstartTimestylewidth: 135px:picker-optionsstartTimeOptionsplaceholderprefix-iconfalsechangestartTimeChangerefstartTime/el-time-select!-- 开始日期 --el-date-pickerv-modelstartDatetypedaterefstartDateplaceholderstylewidth: 135px; margin-left: -135px:picker-optionsstartDateOptionschangestartDateChangevalue-formatyyyy-MM-dd/el-date-picker!-- 选中的开始日期和开始时间展示 --divclickhandleClickStartstylewidth: 200px; margin-left: -135px; display: inline-blockel-inputv-modelstartInputsizesmallrefstartInput:placeholderplaceholderStartprefix-iconel-icon-date/el-input/div!-- 结束时间------------------------------------- --el-time-selectv-modelendTimestylewidth: 135px:picker-optionsendTimeOptionsplaceholderprefix-iconfalsechangeendTimeChangerefendTime/el-time-select!-- 结束日期 --el-date-pickerv-modelendDatetypedaterefendDateplaceholderstylewidth: 135px; margin-left: -135px:picker-optionsendDateOptionschangeendDateChangevalue-formatyyyy-MM-dd/el-date-picker!-- 选中的结束日期和结束时间展示 --divclickhandleClickEndstylewidth: 200px; margin-left: -135px; display: inline-blockel-inputv-modelendInputsizesmallrefendInput:placeholderplaceholderEndprefix-iconel-icon-date/el-input/div/div
/template
script
export default {props: {//particle为1时间间隔15分钟为2时间间隔1小时为3只能选择日期不能选择时间particle: {type: String,default: ,},startValue: {type: String,default: ,},endValue: {type: String,default: ,},placeholderStart: {type: String,default: 开始时间,},placeholderEnd: {type: String,default: 结束时间,},},watch: {//监听时间粒度的变化变化时将之前选择的值清空particle(newVal, oldVal) {this.startInput ;this.endInput ;(this.startDate ),(this.startTime ),(this.endDate ),(this.endTime );},},created(){//页面创建时判断父组件是否传入默认值格式yyyy-MM-dd hh:mm:ss,传入时给日期和时间赋值this.startDate (this.startInput!this.startInput.length19)?this.startInput.substring(0,11):,this.startTime (this.startInput!this.startInput.length19)?this.startInput.substring(11,16):,this.endDate (this.endInput!this.endInput.length19)?this.endInput.substring(0,11):,this.endTime (this.endInput!this.endInput.length19)?this.endInput.substring(11,16):},data() {return {//父组件初始传默认值将默认值赋值给展示变量startInput:(this.startValue!nullthis.startValue!undefinedthis.startValue.length19)?this.timeFormat(this.startValue,this.particle):,endInput:(this.endValue!nullthis.endValue!undefinedthis.endValue.length19)?this.timeFormat(this.endValue,this.particle):,startDate: ,startTime: ,endDate: ,endTime: ,//时间配置startTimeOptions: {start: 00:00,step: 01:00,end: 23:59,maxTime: ,},endTimeOptions: {start: 00:00,step: 01:00,end: 23:59,minTime: ,},//日期配置开始时间大于结束时间结束时间小于开始时间startDateOptions: {disabledDate: (time) {if (this.endDate ! ) {var now new Date(this.endDate 00:00:00);return time.getTime() now.getTime();} else {return false;}},},endDateOptions: {disabledDate: (time) {if (this.startDate ! ) {var now new Date(this.startDate 00:00:00);return time.getTime() now.getTime();} else {return false;}},},};},methods: {//将传入的时间字符串改为对应的格式timeFormat(val,particle) {var str;if (particle 3) {str val.substring(0, 13);var date new Date(val);var minutes date.getMinutes();if (minutes / 15 0) {str str :00:00;}if (minutes / 15 1) {str str :15:00;}if (minutes / 15 2) {str str :30:00;}if (minutes / 15 3) {str str :45:00;}}if (particle 2) {str val.substring(0, 13);str str :00:00;}if (particle 1) {str val.substring(0, 11);str str 00:00:00; }return str;},//开始输入框点击事件handleClickStart() {if (this.startInput.length 19) {this.startDate this.startInput.substring(0, 11);} else {this.startDate this.startInput;}this.$refs.startDate.focus();},//结束输入框点击事件handleClickEnd() {if (this.endInput.length 19) {this.endDate this.endInput.substring(0, 11);} else {this.endDate this.endInput;}this.$refs.endDate.focus();},//选择开始日期后调出开始时间startDateChange() {if (this.startTime ) {this.startInput this.startDate 00:00:00;} else {this.startInput this.startDate this.startTime :00;}this.editStartValue();if (this.particle ! 3) {if (this.particle 1) {this.startTimeOptions.step 00:15;}if (this.particle 2) {this.startTimeOptions.step 01:00;}if (this.endInput.includes(this.startDate) this.endTime ! ) {this.startTimeOptions.maxTime this.endTime;}this.$refs.startTime.focus();}},//选择开始时间后赋值给开始输入框startTimeChange() {this.startInput this.startDate this.startTime :00;this.editStartValue();},//将值传给父组件editStartValue() {this.$emit(editStartValue, this.startInput);},//选择结束日期后调出结束时间endDateChange() {if (this.endTime ) {this.endInput this.endDate 00:00:00;} else {this.endInput this.endDate this.endTime :00;}this.editEndValue();if (this.particle ! 3) {if (this.particle 1) {this.endTimeOptions.step 00:15;}if (this.particle 2) {this.endTimeOptions.step 01:00;}if (this.startInput.includes(this.endDate) this.startTime ! ) {this.endTimeOptions.minTime this.startTime;}this.$refs.endTime.focus();}},//选择结束时间后赋值给结束输入框endTimeChange() {this.endInput this.endDate this.endTime :00;this.editEndValue();},//将值传给父组件editEndValue() {this.$emit(editEndValue, this.endInput);},},
};
/script
