Как в Vuejs передать данные по событию?

Question

[semki096]

Как в Vuejs передать данные по событию? Например нас есть 10 разноцветных блоков. Как при клике на один из низ - передать цвет этого блока в "backgrond-color" тега "body"?

Answer 1

[Dima Polos]

Дочерний компонент подписываете на клик, после чего в методах пишете что-то типа такого: this.$emit('meClicked', this.bgc), то есть генерируете событие и данные, например цвет фона передаете как payload, как объект события.
Родитель подписывается на событие, которое генерирует дочерний компонент @meClicked, в методах создается функция-обработчик, которая примет данные события и что-то с ними сделает, например поменяет фон для body.

Comments

[semki096]

спасибо буду пробовать

Answer 2

[Сергей Соколов]

В конкретном случае, когда хочется изменять цвет элемента body, нет необходимости возиться с передачей данных между родительскими-дочерними компонентами во Vue, т.к. body снаружи даже корневого компонента.

Достаточно прямо в обработчике клика менять цвет фона.

Допустим, цвет блока передаётся в него через props, свойство "color". Можно просто определить обработку клика:

v-on:click="document.body.style.backgroundСolor = color"