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

в 11:21, , рубрики: vuejs

Для динамического связывания данных с определенными атрибутами во 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 и у вас больше нет неопределенности в том, как же он работает.

Автор: Возле ректора

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js