[TOC] >[success] # CheckboxGroup ~~~ 1.無論是使用iview 還是element ui，都可以發現在'checkbox'這里他們都會提供一個組件叫 'CheckboxGroup',會將'checkbox' 數據統一管理，我們來以'iview' 為例： <template> <i-checkbox-group v-model="multiple"> <i-checkbox label="option1">選項 1</i-checkbox> <i-checkbox label="option2">選項 2</i-checkbox> <i-checkbox label="option3">選項 3</i-checkbox> <i-checkbox label="option4">選項 4</i-checkbox> </i-checkbox-group> </template> <script> export default { data () { return { multiple: ['option1', 'option3'] } } } </script> 所以這章節就是封裝一個'CheckboxGroup' 組件 ~~~ >[info] ## 上個章節分裝的checkbox組件和實際原生的區別 ~~~ 1.在封裝之前，給先知道原生的'checkbox' 和我們上個章節封裝的不同點 ~~~ >[danger] ##### 原生 ~~~ 1.這里直接用了vue官方文檔的案例 2.可以發現原生"checkbox" 本身綁定的就是數組，是不是有點懵了，上個章節我們封裝的'checkbox'組件綁定 的只能是'String,Number,Boolean'這三種類型，其實上個章節案例將'value' 這個綁定值改為數組，在做一些 略微邏輯跳轉也可以實現類似原生的方法 ~~~ ~~~ <div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> ~~~ ~~~ new Vue({ el: '#example-3', data: { checkedNames: [] } }) ~~~ >[info] ## 為了可以和原生一樣綁定數組寫 -- CheckboxGroup 組件 ~~~ 1.寫組件從三個方面入手'props','events','slots',根據iview組件我們也可以簡單分析出來， 首先使用的時候用的是'v-model',那就一定有兩個一個是'value'，一個是'input'事件， 再就是有一個'solt' 用來放置封裝好的'checkbox'組件 ~~~ >[danger] ##### 改進我們的checkbox 組件讓更像原生用法 ~~~ 1.現在我們要將我們上一個章節的'checkbox'可以也綁定數組，對照iview我們大體設計如下： ~~~ * iview ~~~ <i-checkbox label="option1">選項 1</i-checkbox> ~~~ * 我們大體猜想 ~~~ 1.iview 中'<i-checkbox label="option1">選項 1</i-checkbox>' label 作為封裝組件的'props'中的屬性傳遞給 'label',在就保證這一組的input中'v-model'綁定都是相同的數組 ~~~ ~~~ <input type="checkbox" :disabled="disabled" :value="label" v-model="model" @change="change" /> ~~~ >[danger] ##### 改造checkbox組件 ~~~ 1.我們將checkbox組件通過if分割成了兩組，一組是我們之前的用綁定是'String,Number,Boolean'這三種類型， 一組是我們為了讓他像原生一樣綁定的是數組 2.我們現在可以確定一點的思路就是如果是最外層使用的是'CheckboxGroup' 組件，那將使用的就是我們的數組 形式的input，這里在'mounted'聲明周期使用'findComponentUpward'在組件通訊章節講的寫法，去找當前組件的 父級是否是使用'CheckboxGroup' 組件包裹來決定使用哪種模式的'checkbox' ~~~ ~~~ <template> <label> <span> <input v-if="group" type="checkbox" :disabled="disabled" :value="label" v-model="model" @change="change" /> <input v-else type="checkbox" :disabled="disabled" :checked="currentValue" @change="change" /> </span> <slot></slot> </label> </template> <script> import { findComponentUpward } from "@/lib/util.js"; export default { name: "iCheckbox", props: { label: { type: [String, Number, Boolean] }, 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 { model: [], group: false, parent: null, 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); console.log(this.model); if (this.group) { this.parent.change(this.model); } else { this.$emit("on-change", value); } }, updateModel() { this.currentValue = this.value === this.trueValue; } }, mounted() { this.parent = findComponentUpward(this, "iCheckboxGroup"); if (this.parent) { this.group = true; } if (this.group) { // 關于updateModel 寫法往下看，這里不用加因為下面父組件的生命周期 // 也做了同樣的事感覺不用加 this.parent.updateModel(true); } else { this.updateModel(); } console.log(this.model); } }; </script> ~~~ >[danger] ##### 現在來分析我們的 CheckboxGroup 組件寫法 ~~~ 1.上面有個'updateModel'方法具體思路，我們先思考一下首先，'CheckboxGroup' 組件插槽中的每一個 'checkedbox' 組件的'v-model'綁定的數組一定要是一個數組，這個數組就是'CheckboxGroup' 傳入進來的數組 2.因此現在的思路就是使用我們組件通信章節說的'findComponentsDownward'向下找到所有在當前組件 'CheckboxGroup' 里面的每一個'checkedbox'組件，并且給他們的'v-model'綁定的數組值都賦值成'CheckboxGroup' 的數組。 3.在'updateModel'方法中有個地方需要說明一下： if (this.childrens) { // 這里的this 指代的是當前'CheckboxGroup' 組件，首先因為是一個實例所以肯定是一個對象 // 這里又使用了es6 解構獲取 value 值，這個value值是誰呢？ // 首先我們看使用 <checkbox-group v-model="multiple">，因此其實當前這個組件有個隱藏的props // 這個props 就是value 這個value 綁定的又是獲取每一項的數組 // 因此將每一項'checkedbox'要管理的數組我們找到了，現在又有每一個子項的對象 // 將每一個子項對象中的'model ' 都綁定上這個統一的數組 const { value } = this; console.log(this); this.childrens.forEach(child => { child.model = value; if (update) { child.currentValue = value.indexOf(child.label) >= 0; child.group = true; } }); } ~~~ ~~~ <template> <div> <slot></slot> </div> </template> <script> import { findComponentsDownward } from "@/lib/util.js"; export default { name: "iCheckboxGroup", props: { value: { type: Array, default() { return []; } } }, data() { return { currentValue: this.value, childrens: [] }; }, methods: { updateModel(update) { this.childrens = findComponentsDownward(this, "iCheckbox"); if (this.childrens) { const { value } = this; console.log(this); this.childrens.forEach(child => { child.model = value; if (update) { child.currentValue = value.indexOf(child.label) >= 0; child.group = true; } }); } }, change(data) { this.currentValue = data; this.$emit("input", data); this.$emit("on-change", data); } }, mounted() { this.updateModel(true); }, watch: { value() { this.updateModel(true); } } }; </script> ~~~ >[danger] ##### 使用的效果 ~~~ <template> <div> {{multiple}} <checkbox-group v-model="multiple"> <checkbox label="option1">選項 1</checkbox> <checkbox label="option2">選項 2</checkbox> </checkbox-group> </div> </template> <script> import Checkbox from "@/components/checkbox/Checkbox.vue"; import CheckboxGroup from "@/components/checkbox/CheckboxGroup.vue"; export default { data() { return { multiple: ["option1"], }; }, components: { Checkbox, CheckboxGroup } }; </script> <style> </style> ~~~