vue.js - 在Vue js中将类作为 Prop 传递？

Question

这是我想将 bind :class 发送到两个子组件的父组件

 <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
              }"
            >

这是这里的子组件，我希望接受类作为 Prop

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

Answer 1

您不能使用属性 class作为 Prop ，因为它保留用于呈现父元素的类。如果您尝试这样做，您将在控制台中收到警告:

"class" is a reserved attribute and cannot be used as component prop.

所以使用另一个名称，例如 childclass :

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

在 child 身上应用它，如:

<input :class="childclass" />

这是一个演示:

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>