>[success] # 封裝一個checkbox [這個章節文章參考](https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5bdc0e596fb9a049d7471ddb) >[danger] ##### 需要知道的知識點 ~~~ 1.一個組件最重要的三個組成部分依次是'prop','event','solt' 2.要知道 input ?的 v-model 語法糖是'input' 和 'value' 縮寫 3.要知道并不是所有公司的'checkbox' 綁定的都是true 和 false ~~~ >[danger] ##### 看一下iview -- checkbox組件 ~~~ <template> <i-checkbox v-model="single">單獨選項</i-checkbox> </template> <script> export default { data () { return { single: false } } } </script> ~~~ >[danger] ##### 封裝一個 ~~~ 1.為了可以在使用組件的時候可以直接綁定'v-model',所以需要預留'value' 和 '$emit("input")' 2.組件的最外層是'input'原生，因此使用v-model，相當于組件prop字段默認有了一個'value' 3.這里有個注意點'<input>、<slot>' 都是包裹在一個 '<label>' 元素內的，這樣做的好處是，當點擊 '<slot>' 里的文字 時，'<input>' 選框也會被觸發，否則只有點擊那個小框才會觸發，那樣不太容易選中，影響用戶體驗。 4.創建目錄可以參考如圖： ~~~  ~~~ <template> <label> <span> <input type='checkbox' :disabled='disabled' :checked='currentValue' @change="change"> <slot></slot> </span> </label> </template> <script> export default { name: 'iCheckbox', props: { disabled: { type: Boolean, default: false, }, value: { type: [String, Number, Boolean], default: false }, trueValue: { type: [String, Number, Boolean], default: true }, falseValue: { type: [String, Number, Boolean], default: false } }, data () { return { currentValue: this.value } }, methods: { change (event) { // 如果 禁選 那么下面的邏輯都不執行 if (this.disabled) { return false } const checked = event.target.checked this.currentValue = checked const value = checked ? this.trueValue : this.falseValue; this.$emit('input', value); this.$emit('on-change', value); }, // 這里是為了 應對特殊選中變量的定義，有時候不能保證 所有項目都是用true false 來控制 updateModel () { this.currentValue = this.value === this.trueValue; } }, watch: { value (val) { if (val === this.trueValue || val === this.falseValue) { this.updateModel(); } else { throw 'Value should be trueValue or falseValue.'; } } }, } </script> <style> </style> ~~~ >[danger] ##### 使用 ~~~ <template> <div> {{msg}} <CheckBox name='w' v-model="msg">足球</CheckBox> </div> </template> <script> import CheckBox from '@/components/checkbox' export default { components: { CheckBox }, data () { return { msg: true } }, methods: { } } </script> <style> </style> ~~~