vue封装组件之复选框

<template>
  <div>
    <input type="checkbox" :checked="dataSource" @change="change($event)" />
  </div>
</template>

<script>
  export default {
    props: {
      dataSource: {
        type: String
      },
    },    
    data() {
      return {
      };
    },
    methods: {
      change: function(event) {
        var $obj = event.target;
        if ($obj.checked) {
          this.$emit('childByValue', '1')
        } else {
          this.$emit('childByValue', '0')
        }
      }
    },
  };
</script>

<style>
</style>

父组件调用

<com-checked :dataSource="obj.value"  @childByValue="justificationStatus"></com-checked>

    //正当理由获取传过来的值
    justificationStatus: function (e) {
      this.obj.value= e;
    },