Когда я только начинал погружаться в мир Front End, Vue.js был одним из моих первых JavaScript-фреймворков, которые я изучил. И это, пожалуй, один из самых простых и минималистичных фреймворков JavaScript, с которого можно начать работу.
Одной из моих проблем было преобразовать всю мою разметку HTML / CSS в компоненты Vue, одним из которых был флажок.
Это моя упрощенная разметка:
<div id="app">
<input type=”checkbox” v-model=”checkData”>
{{ checkData }}
</div>
<script>
new Vue({
el: '#app',
data: {
// This will toggle into true/false
checkData: null
}
})
</script>
Фактическая цель - преобразовать это:
<input type=”checkbox” v-model=”checkData”>
в это:
<checkbox-item v-model="checkData"></checkbox-item>
Установка флажка внутри выделенного компонента Vue помещает мою разметку HTML, стили CSS и пользовательскую логику JS в один файл. Это обеспечивает лучшую ремонтопригодность и удобочитаемость.
Это разметка шаблона для моего запланированного checkbox-item
компонента.
<label class="checkbox-item"> <input type="checkbox" class="checkbox-input"> <span class="checkbox-label"> <slot></slot> </span> </label>
В обычной разметке флажков, не являющихся компонентами, я могу просто поместить v-model
внутри элемента checkbox-input
и назвать это днем. Но поскольку это специальный компонент, мне нужен способ для checkbox-item
компонента «сообщить» root
об обновлении значения checkData
, если флажок установлен.
Прочитав v-model
исходный код и объяснение в документации API, я обнаружил, что v-model
работает, создавая value
свойства и прослушивая событие input
для обновления его значения.
Что-то вроде этого:
<input type=”checkbox” v-model=”checkData”>
в основном это:
<input type=”checkbox” :value=”checkData” @input="val => checkData = val">
Зная об этом, я могу имитировать v-model
функциональность внутри checkbox-item
компонента.
<div id="app">
<checkbox-item v-model="checkData">Hello World</checkbox-item>
{{ checkData }}
</div>
<script>
Vue.component('checkbox-item', {
template: `
<label class="checkbox-item">
<input type="checkbox" :checked="value"
@change="$emit('input', $event.target.checked)"
class="checkbox-input">
<span class="checkbox-label">
<slot></slot>
</span>
</label>
`,
props: ['value']
})
new Vue({
el: '#app',
data: {
// This will toggle into true/false
checkData: null
}
})
</script>
Заключение
Таким образом, я достиг своей первоначальной цели по созданию компонента флажка, содержащего мою разметку HTML и мои потенциальные стили CSS. Имейте в виду, что эта реализация все еще довольно наивна, и с тех пор я улучшил свой компонент.
В общем, для этой конкретной реализации компонента по-прежнему отсутствуют некоторые требования:
- Он не может принимать строковый тип данных в качестве значения
- Он не может принимать массив с несколькими значениями флажков.
- Он не может передавать необязательные атрибуты, такие как
id
,disabled
,required
, без указания реквизита для каждого возможного атрибута.
Я надеюсь, что все, что вы здесь узнали, поможет в написании более продуктивных приложений Vue.
JsFiddle этого компонента доступен здесь. Не стесняйтесь расширять его самостоятельно, основываясь на том, что вы узнали здесь.