passer les classes en tant que props dans vue js ?

Question

C'est le composant parent que je veux envoyer bind :class à deux composants enfants.

 <TextInput
             :icon="['fa', 'user']"
              type="text"
              placeholder="Name"
              v-model.trim="userDetails.buyer_name.$model"
              :class="{
                'is-invalid': $v.buyer_name.$error,
                'is-valid': !$v.buyer_name.$invalid
              }"
            >

c'est le composant enfant ici je veux qu'il accepte la classe comme props

   <div class="product-form">
          <fa-icon  class="icons" :icon="icon" ></fa-icon>
          <input  :type="type" :placeholder="placeholder" /> 
   </div>
</template>

Answer 1

Vous ne pouvez pas utiliser l'attribut class en tant que prop, car il est réservé au rendu de la classe de l'élément parent. Si vous essayez de faire cela, vous obtiendrez un avertissement dans la console :

"class" est un attribut réservé et ne peut être utilisé comme prop de composant.

Utilisez donc un autre nom, par exemple childclass :

:childclass="{
  'is-invalid': $v.buyer_name.$error,
  'is-valid': !$v.buyer_name.$invalid
}"

Appliquez-le dans l'enfant comme :

<input :class="childclass" />

Voici une démo :

Vue.component('child', {
  props: ['childclass'],
  template: `
  <div>
    <input :class="childclass" />
  </div>
  `
})

new Vue({
  el: "#app"
});

.testclass {
  border: 10px solid red;
}

<div id="app">
  <child :childclass="{ testclass: true }"></child>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>