vue+element 表单封成组件(2)
今天我们继续把时间选择器,多选框和单选框加上
父组件(在昨天的基础上增加):
<template> <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <commonformtext prop="biao" placeholder="这个是测试的" label="活动区域" v-model="ruleForm.biao" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' }]" > </commonformtext> <commonformselect prop="select" placeholder="这个是测试的下拉框" label="下拉框" v-model="ruleForm.select" :rules="{ required: true, message: '请选择活动区域', trigger: 'change' }" :selectdata='selectdata' > </commonformselect> <commonformtimeb> <template slot="date"> <commonformdate v-model="ruleForm.date1" placeholder="请选择日期" prop="date1" :rules="{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }" > </commonformdate> <el-col class="line" :span="0.5">--</el-col> <commonformtime v-model="ruleForm.date2" placeholder="请选择时间" prop="date2" :rules="{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }" > </commonformtime> </template> </commonformtimeb> <commonformcheckbox prop="type" label="活动性质" v-model="ruleForm.type" :rules=" { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }" :checkboxdata='checkboxdata' > </commonformcheckbox> <commonformradio prop="radio" label="活动性质" v-model="ruleForm.radio" :rules=" { required: true, message: '请选择活动资源', trigger: 'change' }" :radiodata='radiodata' > </commonformradio> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> </el-form-item> </el-form> </template> <script> import commonformtext from "@/components/common/formtext.vue"; import commonformselect from "@/components/common/formselect.vue"; import commonformtime from "@/components/common/formtime.vue"; import commonformtimeb from "@/components/common/formtimeb.vue"; import commonformdate from "@/components/common/formdate.vue"; import commonformcheckbox from "@/components/common/formcheckbox.vue"; import commonformradio from "@/components/common/formradio.vue"; export default { data() { return { ruleForm: { date1: "", date2: "", biao: "", type: new Array(), select: "", radio: "" }, selectdata: [ { label: "区域1", value: "1", id: 1 }, { label: "区域2", value: "2", id: 2 }, { label: "区域3", value: "3", id: 3 }, { label: "区域4", value: "4", id: 4 }, { label: "区域5", value: "5", id: 5 } ], checkboxdata: [ { label: "美食/餐厅线上活动", value: "1", id: 1 }, { label: "地推活动", value: "2", id: 2 }, { label: "线下主题活动", value: "3", id: 3 }, { label: "单纯品牌曝光", value: "4", id: 4 } ], radiodata: [ { label: "线上品牌商赞助", value: "1", id: 1 }, { label: "线下场地免费", value: "2", id: 2 }, { label: "线下主题活动", value: "3", id: 3 } ] }; }, components: { commonformtext, commonformselect, commonformtime, commonformtimeb, commonformdate, commonformcheckbox, commonformradio }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); } } }; </script>
时间选择器(一共两个,都差不多只粘一个了)
<template> <el-col :span="11"> <el-form-item :prop="prop" :rules="rules" > <el-date-picker type="date" :placeholder="placeholder" v-model="myValue" style="width: 100%;"></el-date-picker> </el-form-item> </el-col> </template> <script> export default { props: { type: { type: Array }, prop: { type: String }, placeholder: { type: String }, label: { type: String }, value: [String, Number, Date], rules: [Object, Array], name: { type: String } }, data() { return { myValue: "" }; }, mounted() { this.myValue = this.value; }, watch:{ myValue(val){ this.$emit("input", this.myValue); } } }; </script>
多选
<template> <el-form-item :label="label" :prop="prop" :rules="rules"> <el-checkbox-group v-model="myValue"> <el-checkbox v-for="item in checkboxdata" :key="item.id" :label="item.label" :name="name"></el-checkbox> </el-checkbox-group> </el-form-item> </template> <script> export default { props: { type: { type: Array }, prop: { type: String }, placeholder:{ type: String }, label:{ type: String }, value:{ type: Array }, rules:[Object,Array], name:{ type:String }, checkboxdata:{ type:Array } }, data(){ return { myValue:[] }; }, watch:{ myValue(val){ this.$emit("input",this.myValue) console.log(val,"aaa") } } } </script>
单选和多选几乎一样就不发了
接下来聊聊今天遇到的问题
父组件中的 ruleForm.type 值为new Array()这是多选所以要传数组过去子组件用数组接再传回来就ok
和昨天一样就结果来看我们发现只有下拉栏使用了change事件 传回父组件而其他的子组件全都使用了watch监听,如果其他组件也使用change会发生什么后果呢?按照昨天的结论应该是change比watch快所以更没问题了~
这是什么情况?为什么只有下拉栏的change比watch快而其余的都是watch快???
经过一下午的冥思苦想和询问大佬,得到了不确定的答案,因为下拉栏的change事件是原生事件而时间选择器,多选框的change事件是element封装的事件,所以当然是原生的跑得快了。。
仔细一想好像挺有道理的啊!