Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

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

Атрибуты, не относящиеся к реквизиту

Атрибут non-prop - это атрибут, который передается компоненту, но для него не определено соответствующее свойство.

Компоненты Vue могут принимать произвольные атрибуты, поскольку авторы библиотек компонентов не всегда могут предвидеть, как их компоненты могут быть использованы.

Например, если у нас есть следующий код:

src/index.js :

Vue.component("child", {
  template: `
    <div>      
    </div>
  `
});
new Vue({
  el: "#app"
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <child foo="foo"></child>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Vue не будет показывать никаких предупреждений или ошибок, даже если наш компонент явно не принимает свойство foo.

Замена / объединение с существующими атрибутами

Значения атрибутов class и style будут объединены при передаче в компонент.

Например, если у нас есть следующий код:

src/index.js :

Vue.component("child", {
  template: `
    <div class='border'>      
      foo
    </div>
  `
});
new Vue({
  el: "#app"
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .red-text {
        color: red;
      }
      .border {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <child class="red-text"></child>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Тогда получаем:

Как мы видим, Vue достаточно умен, чтобы объединить оба класса. Класс red-text, который мы передали, объединяется с классом border, который есть в коде нашего компонента.

Для реквизитов, отличных от class и style, значение будет заменено. Например, если у нас есть:

src/index.js :

Vue.component("child", {
  template: `
    <div data-foo='bar'>      
      foo
    </div>
  `
});
new Vue({
  el: "#app"
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <child data-foo="foo"></child>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

В результате рендеринга мы получим data-foo=”foo”.

Отключение наследования атрибутов

Мы можем отключить наследование атрибутов, добавив inheritAttrs: false в параметры компонента.

Например, мы можем сделать это следующим образом:

src/index.js :

Vue.component("base-input", {
  inheritAttrs: false,
  props: ["label", "value"],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
});
new Vue({
  el: "#app",
  data: {
    msg: ""
  }
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <base-input
        v-model="msg"
        required
        placeholder="Enter your message"
      ></base-input>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

В приведенном выше коде мы использовали v-bind=”$attrs” для использования переданных атрибутов, и у нас есть:

v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"

для переопределения атрибутов, которые передаются, но мы не хотим использовать их в компоненте, предоставляя их собственные значения.

Заключение

Атрибуты non-prop можно установить в компонентах Vue без отображения предупреждений и ошибок.

class и styles, которые передаются как реквизиты, объединяются с реквизитами в дочернем компоненте. Другие переданные реквизиты заменяют существующие значения атрибутов.

Мы можем отключить это поведение, установив inheritAttrs на false в параметрах компонента, чтобы предотвратить слияние или замену значений атрибутов.