Откуда берётся событие update:foo?

Question

[pegas]

Прочитал в документалке следующее:
Следующее
<comp :foo.sync="bar"></comp>
будет преобразовано в:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

Чтобы дочерний компонент обновлял значение foo, он должен явно генерировать событие, вместо изменения параметра входных данных:

this.$emit('update:foo', newValue)

Не пойму что такое update:foo ?? это специальное событие у Vue которое вызывается при изменении входного параметра? изменяя значение родителя?

И почему это какое-то странное событие с двоеточием ":"?

Answer 1

[Андрей Хохлов]

Это название события, можно хоть updateBaz, хоть helloWorld его обозвать.

А что до двоеточия, это вроде namespace'а. Vue в данном случаем сам генерирует название события.

Согласно документации

<comp :foo.sync="bar" :baz.sync="xyz"></comp>

будет преобразовано в

<comp :foo="bar" @update:foo="val => bar = val" :baz="xyz" @update:baz="val => xyz = val"></comp>

И т.д.

Comments

[pegas]

Как его можно обозвать updateBaz если update это встроенное во vue событие? или можно сделать типа this.$emit('updateBaz:foo', newValue) ?

[Андрей Хохлов]

Артём, Событие (вообще) можно обозвать как угодно.
А подобное событие генерирует Vue, поэтому мы его названием управлять не можем. Оно не встроенное, просто синтаксический сахар.

<comp :foo.sync="bar"></comp>
=>

<comp :foo="bar" @update:foo="val => bar = val"></comp>

this.$emit('update:foo', newValue)

А можно сразу написать:

<comp :foo="bar" @helloWorld="val => bar = val"></comp>

this.$emit('helloWorld', newValue)