Добавлен: 06.11.2023
Просмотров: 7
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
readonly
:value='textareaData'
>
`
}
const app = Vue.createApp(App);
app.mount('#forms-components');
По ходу написания дочерних компонентов, я буду добавлять в данный файл еще больше функционала, что также актуально и для дочерних компонентов.
Дочерний компонент с checkbox
Опишем компонент Checkbox, который позволяет создавать чекбоксы (флажки). Компонент будет принимает свойство selected, которое представляет собой объект данных, содержащий значения чекбоксов true или false.
Данное свойство будет приходить из родительского компонента с помощью метода props. Метод props в Vue.js используется для передачи данных между компонентами. Он позволяет передавать данные в компонент c помощью директивы v-bind, а затем использовать их внутри компонента.
Синтаксис метода props выглядит следующим образом:
props: {selected: Object},
В этом примере мы ожидаем, что от родительского компонента придут данные от атрибута с именем selected, которые имеют тип Object. Мы можем передать этот аргумент в другой компонент и использовать его внутри него.
Далее в методе data создается объект data, который содержит значения из объекта selected, которые мы передаем с помощью метода Object.assign, который используется для копирования значений из объекта selected в объект data. Это позволяет использовать значения объекта selected внутри компонента без необходимости передавать его напрямую и к тому же наш объект не будет терять реактивности. Реактивность в Vue.js обеспечивается за счет использования виртуальных DOM. Когда данные изменяются в компоненте, виртуальные DOM обновляются, чтобы отразить изменения. Это позволяет Vue.js автоматически обновлять данные на странице при изменении исходных данных.
После чего в шаблоне создаем контейнер div со следующими классами "uk-flex uk-margin uk-grid-small uk-child-width-auto". Класс "uk-flex" определяет, что элемент должен быть гибким и адаптироваться к содержимому внутри него. Классы "uk-margin" и "uk-grid-small" используются для настройки отступов и ширины колонок сетки соответственно. Наконец, класс "uk-child-width-auto" указывает на то, что ширина колонок должна быть автоматически определена на основе содержимого внутри каждой колонки.
Далее в данном контейнере описываем следующие div с помощью директивы v-for, который используется для перебора массива data, который содержит значения и ключи для каждого элемента таблицы. Для каждого элемента создается div-блок. В этом блоке находится input-элемент с типом checkbox и id, равным ключу из массива data. Также добавляется label-элемент, который связывает input-элемент и ключ с помощью атрибута for. При изменении значения checkbox-элемента, что реализуется с помощью события changed и директивы v-on, которая имеет сокращение в виде «@», вызывается функция changed, которая обновляет значение data[key] в массиве data.
Теперь, чтобы отслеживать изменения свойства "selected" и обновлять массив "data" с новыми значениями, нам идеально подойдет метод watch, который отслеживает изменение значения свойства компонента Vue и вызывает функцию обратного вызова при изменении. Watch используется для отслеживания изменения состояния компонента и обновления его данных при необходимости. Также, к примеру, вы можете использовать watch для отслеживания изменения количества товаров в корзине и обновлять количество товаров на странице корзины при изменении количества.
Итак, объявляем метод watch и записываем в него свойство "selected", которое будет отслеживаться. А внутри него напишем функцию handler, что будет вызываться при изменении его значения. Данная функция должна обновлять значения свойства "data" на основе текущего значения свойства "selected" с помощью того же метода Object.assign, что мы и использовали выше. Также добавим параметр deep = true, который указывает, что изменения должны быть обработаны глубоко внутри объекта "data", а не только на уровне свойств. Это позволяет сохранять состояние объекта "data" при изменении значений его свойств.
После данного этапа напишем метод для обработки события changed, который мы описывали выше. Методы (methods) - это функции, которые вызываются при определенных событиях в компоненте Vue.js. В моем случае метод "changed" вызывается при изменении значений свойств data. Внутри метода "changed" необходимо отправить событие, который я называл "changeCheckboxEvent", с данными из свойства data для того, чтобы передать данные в родительский компонент и обновления там данных. Это делается с помощью функций emit. Она позволяет передавать данные и события между компонентами, даже если они не связаны напрямую.
Emit позволяет отправлять данные между компонентами при помощи событий, на которые можно подписаться. Например, у нас есть компонент списка товаров, и мы хотим отправить выбранную строку в другой компонент. Для этого мы можем использовать emit, чтобы отправить событие с выбранной строкой во второй компонент, где оно будет обработано.
Emit принимает два аргумента:
1. Название события
2. Данные, которые переходят вместе с событием.
Вот пример использования функции emit:
this.$emit('changeCheckboxEvent', this.data);
Также необходимо в начале компонента прописать директиву emits, которая указывает, какие события компонент будет отправлять другим компонентам. В моем случае компонент будет отправлять событие changeCheckboxEvent.
После чего экспортируем компонент CheckboxComponent.
Теперь код в файле checkbox.js выглядит следующим образом:
const CheckboxComponent = {
props: {selected: Object},
emits:['changeCheckboxEvent'],
data() {
return {
data: Object.assign({}, this.selected),
}
},
template: `
type="checkbox"
:id='key'
v-model='data[key]'
@change='changed'>
watch: {
selected: {
handler(){
this.data = Object.assign({}, this.selected)
},
deep:true
}
},
methods: {
changed() {
this.$emit('changeCheckboxEvent', this.data);
},
},
}
export { CheckboxComponent }
Но это еще не все, теперь мы должны импортировать данный компонент в родительский и определить его в шаблоне.