vue checkbox复选框组件封装调用

<Checkbox :total="checkedlist2" :id="'b'" :random="Math.random()" 
:checked="checkedPhaseItems" type="1"  @text="checkboxFn2"></Checkbox>

<template>
  <div class="layout">
    <template v-if="type==1">
      <!-- ['甲级','乙级','丙级'] -->
      <template v-for="(item,index) in total">
        <label :for="id+item">
          <input type="checkbox" class="none" :id="id+item" 
          v-model="checkedItems" :value = "item">
          <template v-if="checkedItems.indexOf(item)>=0">
              <i class="fa fa-check-square color-primary"></i>
          </template>
          <template v-else>
              <i class="fa fa-square-o color-ccc"></i>
          </template>
          <span class="margin-right-10">{{item}}</span>
        </label>
      </template>
    </template>
  </div>
</template>

<script>
    export default {
      //列表、id、、随机数、默认值、disabled状态,类型(1、对象数组;2简单数组)
      props: ["total","id","random","checked","disabled",'type'],  
        data() {
            return {
               checkedItems:this.checked,
            }
      },
      watch: {
        random(){
          this.checkedItems=this.checked;
        },
        checkedItems(newval,oldval) {
          this.test();
        },
      },
      methods:{
        test(){
          this.$emit('text',this.checkedItems);
        },
      }
    }
</script>