Для динамического связывания данных с определенными атрибутами во vue.js используется директива v-bind, которая имеет сокращение “:”.
К примеру, чтобы связать свойство src элемента с переменной imageSrc из ваших данных, мы напишем:
<img v-bind:src="imageSrc">
<!-- или сокращенно -->
<img :src="imageSrc">
Точно также мы можем использовать v-bind для, к примеру, передачи определенного события в элемент input:
<input :onchange="someFunc">
Однако, если мы сейчас отрендерим компонент с такой строкой кода и посмотрим на код, который получился в итоге, мы увидим:
<input onchange=”function () { [native code] }”>
Обработчик события работать не будет.
Все дело в том, что по умолчанию запись вида “:onchange=…” формирует атрибуты html элемента, то есть текстовые данные HTML-элемента. Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов. Подробнее про атрибуты и свойства можно почитать здесь: learn.javascript.ru/attributes-and-custom-properties
В итоге, когда мы начинаем работать с DOM-элементами, в частности, слушать события, то мы работаем именно со свойствами DOM-элементов, а не с атрибутами HTML-элементов. Другими словами, если мы хотим повесить событие на наш input, мы должны указать Vue, что байндить мы должны это значение именно как свойство dom-элемента. Тут нам и пригождается модификатор .prop:
<input :onchange.prop="someFunc">
Здесь мы указываем Vue, что событие onchange должно быть именно свойством dom-элемента. После этого атрибут “onchange=”function () { [native code] }”” исчезает из нашего html-элемента, зато при изменениях начинает выполняться код функции someFunc.
Точно также конструкцию v-bind:some.prop можно использоваться для работы с вложенными компонентами. К примеру, у нас есть дочерний компонент <child-comp>, который состоит из единственного div-а:
<template>
<div>
Child
</div>
</template>
<script>
export default {
name: "child-comp",
props: {},
data() {
return {};
}
}
</script>
Мы его можем вызвать в родительском компоненте и передать в него атрибут hello:
<child-comp :hello="'some hello'"/>
и получить на выходе html-элемент:
<div hello="some hello">
Child
</div>
В дочернем компоненте переменной this.hello не появится, как и в его корневом элементе this.$el.
Если в props дочернего компонента прописать hello:
<script>
export default {
name: "child-comp",
props: {hello: String},
data() {
return {};
}
}
</script>
… то на выходе у нас будет простой html-элемент:
<div>
Child
</div>
… а у дочернего компонента появится переменная this.hello равная значению ‘some hello’. Однако this.$el этого свойства также иметь не будет. Но если теперь мы вызовем наш дочерний элемент с модификатором .prop:
<child-comp :hello.prop="'some hello'"/>
… html-элемент отрендерится без атрибута hello, this.hello компонента child-comp будет undefined, а this.$el.hello будет равен значению ‘some hello’.
Я надеюсь, пример, приведенный мной, четко определил механизм работы модификатора .prop и у вас больше нет неопределенности в том, как же он работает.
Автор: Возле ректора
