在Vue js中将类作为道具传递？

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

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

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

Answer 1

您不能将该属性用作classprop，因为它是为渲染父元素的类而保留的。如果您尝试这样做，您将在控制台中收到警告：

“class”是保留属性，不能用作组件属性。

因此，请使用另一个名称，例如childclass：

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

将其应用在孩子身上，例如：

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