web-dev-qa-db-fra.com

à quoi héritent les attributs: false et $ attrs utilisés pour in vue?

Comme la question le suggère, je ne peux pas comprendre leur signification et pourquoi je devrais l'utiliser. On dit qu'il peut être utilisé de sorte que lorsque nous avons de nombreux composants et que nous voulons transmettre des données du parent au composant de l'enfant de l'enfant, nous n'avons pas à utiliser d'accessoires. Est-ce vrai?

Ce serait bien si vous pouviez donner un exemple plus simple. Les documents Vue.js ne mentionnent pas grand-chose.

vue.jsvuejs2vue-component
9
Nika Kurashvili

Jetez un œil à la section "Désactivation de l'héritage d'attributs" des documents et description de l'api pour les détails complets.

Son utilisation principale est de définir des composants dits "transparents" qui transmettent des attributs. L'exemple donné dans la doc est un composant enveloppant un élément input:

// Component
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>
  `
})

// Usage
<base-input
  v-model="username"
  required
  placeholder="Enter your username"
/>

Les attributs required et placeholder sont ensuite définis sur input au lieu de l'habillage label.

Cela n'a vraiment rien à voir avec les enfants d'enfants de composants mais il peut être utilisé dans une telle hiérarchie.

J'espère que cela clarifie les choses pour vous.

5
bernie