vue组件与方法知识点
知识一:写法
“:” 是指令 “v-bind:”的缩写,“@”是指令“v-on:”的缩写;“.”是修饰符。
修饰符
修饰符 (Modifiers) 是以半⾓句号 . 指明的特殊后缀,⽤于指出⼀个指令应该以特殊⽅式绑定。例如,.prevent 修饰符告诉 v-on 指令对于
触发的事件调⽤ event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
知识二:组件传参
element-ui-admin中有个日期组件,现在要外面能控制这个日期的值,还要在用户改变日期时捕获到值的变化。
1.页面初始时使用组件,并向组件传参
a.定义在ComDatePicker.vue中
<el-date-picker v-if='timeShow' :append-to-body="false" :class="pickerTextColor" v-model="pickerValue" :value-format="dateym" @change="selectTimeChange" :type="timeType" unlink-panels range-separator="至" placeholder="选择日期" start-placeholder="开始日期" end-placeholder="结束日期" @blur="dateControlBlur" :picker-options="pickerOptions" ></el-date-picker>
可以看到v-model是pickerValue,还有 @change="selectTimeChange"后面要用。
js
export default { props:{ timeType:{ default : 'date', type : String }, pickerValue:{ default: '', type: String } }, data() { return { timeShow: true, //pickerValue: '', //pickerValue: '2013-01-01 至 2022-01-01', pickerValue: this.pickerValue, allTime: ['', '', '', []], dateym: "yyyy-MM-dd", //timeType: "date", //时间控件改变 //timeType:"daterange", timeType: this.timeType, pickerOptions: { shortcuts: [{ text: '年', onClick: (picker) => { picker.$emit('pick', ''); this.timeType = "year" this.dateym = "yyyy"; setTimeout(() => { this.$refs.focusInput.querySelector('input').focus() }, 0) this.pickerValue = this.allTime[0]; } }, { text: '月', onClick: (picker) => { picker.$emit('pick', ''); this.timeType = "month" this.dateym = "yyyy-MM"; setTimeout(() => { this.$refs.focusInput.querySelector('input').focus() }, 0) this.pickerValue = this.allTime[1]; } }, { text: '日', onClick: (picker) => { picker.$emit('pick', ''); this.timeType = "date"; this.dateym = "yyyy-MM-dd"; setTimeout(() => { this.$refs.focusInput.querySelector('input').focus() }, 0) this.pickerValue = this.allTime[2]; } }, { text: '时间段', onClick: (picker) => { picker.$emit('pick', ''); this.timeType = "daterange" this.dateym = "yyyy-MM-dd"; setTimeout(() => { this.$refs.focusInput.querySelector('input').focus() }, 0) this.pickerValue = this.allTime[3]; } } ] } } }, methods: { // 选中切换时间 selectTimeChange() { this.$emit("pickerValue", this.pickerValue); this.allTime[this.timeType === 'year' ? 0 : this.timeType === "month" ? 1 : this.timeType === 'date' ? 2 : 3] = this.pickerValue; }, // 日期控件失去焦点时 dateControlBlur() { this.timeShow = false; this.$nextTick(() => { this.timeShow = true; }) }, }, // 计算属性根据class来切换字体选中颜色 computed:{ pickerTextColor:function(){ return this.timeType === 'year' ? 'ComDatePicker-yearColor' : this.timeType === 'month' ? 'ComDatePicker-monthColor' : this.timeType === 'date' ? 'ComDatePicker-dateColor' : 'ComDatePicker-daterangeColor'; } } }
b.使用
js
import DateTime from '@/frame/components/ComDatePicker.vue' export default { data() { return { pickerValue:null, } }, components: { DateTime, }, methods: { initPickerValue(){ var pickerValue=[]; const start = new Date() let year1, month1, day1; [year1, month1, day1] = [start.getFullYear(), start.getMonth(), start.getDate()] const date1 = new Date(year1, month1, day1, 7) pickerValue.push(date1.Format('yyyy-MM-dd')) const end = new Date() let year2, month2, day2 end.setTime(end.getTime() - 24 * 60 * 60 * 1000 * 6); [year2, month2, day2] = [end.getFullYear(), end.getMonth(), end.getDate()] const date2 = new Date(year2, month2, day2, 7) pickerValue.unshift(date2.Format('yyyy-MM-dd')) return pickerValue; }, initWarn(dateObj){ this.pickerValue=dateObj; let param=this.getParam(); this.initWarnTrendChart(param); this.queryAlarmUnit(param); this.queryAlarmType(param); }, }, mounted() { //初始化时间 this.pickerValue=this.initPickerValue(); } }vue
<date-time v-bind:timeShow="true" :pickerValue="pickerValue" timeType="daterange" @pickerValue="initWarn"></date-time>
这里:pickerValue用上了上面的知识。下面要用@了。
2. 用户改变日期时获取到值
改变值方法会调用组件里的selectTimeChange方法,里面有this.$emit("pickerValue", this.pickerValue);
这句代码意思是,触发配置的@pickerValue对应的事件,参数是this.pickerValue。
上面代码可以看到@pickerValue="initWarn",就是调用initWarn函数,上面也可以查到。
注意initWarn方法里的this.pickerValue与组件里的this.pickerValue不是同一个对象。
相关阅读
评论:
↓ 广告开始-头部带绿为生活 ↓
↑ 广告结束-尾部支持多点击 ↑