webdevs.blog PL

Podczas tworzenia aplikacji przy użyciu Vue.js (oraz podobnych frameworków), bardzo prawdopodone, że zajdzie potrzeba stworzenia komponentu pola wejściowego. W trakcie rozwoju projektu, może się okazać że pole może przybierać różne formy, np. pole z podpowiedzią, etykietą, prefiksem, sufiksem, ikoną, wiadomością o walidacji itp.

Z punktu widzenia kodu HTML, sam element pola nie wystarczy, aby zbudować widoczne na przykładzie układy. Wymagane jest do tego więcej elementów HTML. Spójrz na przykłady poniżej:

Default input:

<input type="text" placeholder="Default input" name="example" />Code language: HTML, XML (xml)

Input with hint:

<input type="text" placeholder="Default input" name="example" />
<div>Nam pretium mi tempor eros interdum.</div>Code language: HTML, XML (xml)

Input with label:

<label>
  <div>Name</div>
  <input type="text" placeholder="Default input" name="example" />
</label>Code language: HTML, XML (xml)

Input with prefix:

<div>
  <div>Prefix</div>
  <input type="text" placeholder="Default input" name="example" />
</div>
Code language: HTML, XML (xml)

Input with suffix:

<div>
  <input type="text" placeholder="Default input" name="example" />
  <div>Suffix</div>
</div>Code language: HTML, XML (xml)

All in one:

<label>
  <div>Name</div>
  <div>  
    <div>Prefix</div>
    <input type="text" placeholder="Default input" name="example" />
    <div>Suffix</div>
  </div>
  <div>Nam pretium mi tempor eros interdum.</div>
</label>Code language: HTML, XML (xml)

Użycie dyrektywy v-model oraz nasłuchiwanie na zdarzenia w utworzonym komponencie

Podczas przypisywania dyrektywy v-model w komponencie:

<InputField v-model="inputValue"/>Code language: HTML, XML (xml)

kod nie zadziała właściwie i nie przypisze odpowiednich danych do komponentu, a także nie będzie odpowiednio nasłuchiwał na zdarzenia, jeżeli pole wejściowe będzie otoczone dodatkowymi elementami HTML (jak na przykładzie). Dzieje się tak przez domyśly mechanizm dziedziczenia atrybutów. Vue automatycznie przeniesie atrybuty i funkcje nasłuchujące na zdarzenia na najwyższy element otaczający komponent. To powoduje problem przy zarządzaniu stanem formularza. Na szczęście, to zachowanie może zostać zmienione poprzez użycie właściwości inheritAttrs w skrypcie komponentu w exportowanym obiekcie:

<script>
  export default {
    name: 'input-field',
    data: {
      inputValue: ''
    },
    inheritAttrs: false
    // [...]
  }
</script>Code language: JavaScript (javascript)

Ustawiając właściwość inheritAttrs na false, Vue nie powiąże atrybutów bezpośrednio z elementem otaczającym komponent. Zamiast tego programista może zdecydować, gdzie powinny one być powiązane. Aby to zrobić, powiąż zmienne globalne $attrs i $listeners z elementem pola:

<label>
  <div>Name</div>
  <div>  
    <div>Prefix</div>
    <input type="text" placeholder="Default input" name="example" v-bind="$attrs" v-on="$listeners" />
    <div>Suffix</div>
  </div>
  <div>Nam pretium mi tempor eros interdum.</div>
</label>Code language: HTML, XML (xml)

Dzięki temu wszystkie zdarzenia będą emitowane do komponentu nadrzędnego, a dane przekazywane do wybranego elementu.

By default, parent scope attribute bindings that are not recognized as props will “fallthrough” and be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting inheritAttrs to false, this default behavior can be disabled. The attributes are available via the $attrs instance property (also new in 2.4) and can be explicitly bound to a non-root element using v-bind. Note: this option does not affect class and style bindings.

https://vuejs.org/v2/api/#inheritAttrs