Pull to refresh

Vue.js: v-bind модификатор .prop

Для динамического связывания данных с определенными атрибутами во 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 и у вас больше нет неопределенности в том, как же он работает.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.