Когда я только начинал погружаться в мир 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 этого компонента доступен здесь. Не стесняйтесь расширять его самостоятельно, основываясь на том, что вы узнали здесь.