在前端開發(fā)中，我們經(jīng)常需要對數(shù)據(jù)進行分類。而在一些特定的場合，我們需要使用多選的方式來對數(shù)據(jù)進行分類。這時候，Vue的分類多選組件就變得非常實用。
Vue.component('multi-select', {
props: {
options: {
type: Array,
required: true
},
value: {
type: Array,
default: () =>[]
}
},
data() {
return {
selected: []
}
},
mounted() {
this.selected = this.value.slice()
},
watch: {
value(newValue) {
this.selected = newValue.slice()
}
},
methods: {
toggleSelect(option) {
if (this.selected.includes(option)) {
this.selected.splice(this.selected.indexOf(option), 1)
} else {
this.selected.push(option)
}
this.$emit('input', this.selected)
}
},
template: `已選：{{ selected }}
`
})這里的多選組件接受兩個props：options和value。options是包含所有可選項的數(shù)組，value是當前選中的項的數(shù)組。這個組件使用v-model指令來綁定selected數(shù)組，這樣就可以在使用這個組件的地方雙向綁定value了。
在這個例子中，我們展示了如何使用這個多選組件，傳入一個包含所有可選水果的數(shù)組和一個表示當前選中水果的數(shù)組。請注意，selectedFruits和fruits必須是使用Vue.reactive創(chuàng)建的響應(yīng)式對象。
new Vue({
el: '#app',
data: {
fruits: ['apple', 'banana', 'orange', 'peach'],
selectedFruits: ['apple']
}
})這里我們綁定了一個Vue實例，數(shù)據(jù)中有一個fruits數(shù)組和一個selectedFruits數(shù)組。我們在多選組件中使用了這兩個數(shù)組來演示如何使用多選組件。在這個示例中，初始時僅選中了一個水果。
多選組件的內(nèi)部結(jié)構(gòu)非常簡單。我們使用了一個v-for循環(huán)來遍歷所有可選項。對于每個選項，我們創(chuàng)建了一個復(fù)選框和一個標簽來顯示選項的名稱。當用戶點擊復(fù)選框時，我們在toggleSelect方法中更新selected數(shù)組的狀態(tài)，并在最后觸發(fā)了一個input事件以通知外界。
在watch中，我們監(jiān)聽了value的變化，并將selected數(shù)組同步更新。這個操作使得多選組件具備了與v-model雙向綁定的功能，同時在組件內(nèi)部與外部數(shù)據(jù)的同步也被正確維護了。
在這個例子中，我們只展示了一個非常簡單的多選組件。如果需要更復(fù)雜的功能，我們可以創(chuàng)建新的子組件并集成到它們之中。使用Vue框架開發(fā)多選組件，非常值得我們?nèi)L試。