v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

<common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange"></common-checkbox>

     /**
     * 処理のためのサブコンポーネントフィードバックを受け取る */
    チェック変更(値) {
      this.goodsSelected=value //サブコンポーネントのデータを親コンポーネントに割り当てる}

    /**
     * 選択したポストバックを切り替える */
    トグルチェック(値) {
      this.$emit('changeCheck', value)// return メソッド、子コンポーネントの変更されたデータを親コンポーネントに返して処理します}

 this.$emit('入力', 値) 

エクスポートデフォルト{
  名前: 'CommonCkeckBox',
  モデル： {
    プロパティ: 'チェック済み'、
    イベント: 'changeCheck'
  },
    小道具: {
    チェック済み:
      タイプ: ブール値、
      デフォルト: false、
    }, // 選択状態}
  }

<テンプレート>
<div class="チェックボックスコンテナ" @click="toggleCheck()" :style="{width:width,height:height}">
        <div class="チェックボックスアイコン">
              <!-- 3 つの状態: 選択、選択解除、無効 -->
              <img alt :src="`${$cdnImageUrl}/cart/icon-selected.png`" :width="幅" :height="高さ" key="選択" v-if="チェック済み&&!無効"/>
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="幅" :height="高さ" key="未選択" v-if="!チェック済み&&!無効" />
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="幅" :height="高さ" class="disabled" key="未選択" v-if="disabled"/>
            </div>
        <スロット></スロット>
</div>
</テンプレート>
<スクリプト>
/**
 * グローバル統合ポップアップウィンドウ */
エクスポートデフォルト{
  名前: 'CommonCkeckBox',
  モデル： {
    プロパティ: 'チェック済み'、
    イベント: 'changeCheck'
  },
  小道具: {
    チェック済み:
      タイプ: ブール値、
      デフォルト: false、
    }, // 選択状態が無効: {
      タイプ: ブール値、
      デフォルト: false、
    }, // 無効にするかどうか width: {
      タイプ: 文字列、
      デフォルト: '16px'、
    }, //ボタンのデフォルトの幅と高さ: {
      タイプ: 文字列、
      デフォルト: '16px'、
    }, //ボタンのデフォルトの高さ},
  作成された() {
  },
  データ（） {
    戻る {
    }
  },
  メソッド: {
    /**
     * 選択したポストバックを切り替える */
    トグルチェック() {
      this.$emit('changeCheck', !this.checked)
      this.$emit('toggleCheck')
    }
  },
  時計：
    チェック済み:
      ハンドラ(新しい値、古い値) {
      //状態変更イベントを開く this.$emit('onChange')
      },
      深い: 本当
    }
  },
}
</スクリプト>
<style lang="scss" スコープ>
.チェックボックスコンテナ{
    表示: インラインブロック;
    .チェックボックスアイコン{
        画像{
          変換: translateZ(0);
          変更内容: 自動;
        }
        。無効{
          背景色:#f5f5f5;
          境界線の半径: 50%;
        }
    }
}
</スタイル>

      <common-checkbox v-model="item.goodsSelected" class="left" :width="'16px'" :height="'16px'"></common-checkbox>