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封装的事件，所以当然是原生的跑得快了。。

仔细一想好像挺有道理的啊！