在 vue js 中将类作为道具传递？答案

【问题标题】：pass class as props in vue js?在 vue js 中将类作为道具传递？
【发布时间】：2021-04-25 20:46:17
【问题描述】：

这是我要发送的父组件 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
    }"
 >

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

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

【问题讨论】：

你可以在你的子组件中使用inheritAttrs: false 然后类会自动绑定你的子组件
实际上想在子组件中分类，我无法 vuelidate 因为我的输入字段在另一个组件上
我已经完成了相同的工作，但仍然无法正常工作
什么不起作用？你可以看到演示作品，所以你一定做了一些不同的事情。提供细节：你做了什么不同的事情？有错误吗？等
我从演示中获取概念，而不是解决方案。没有任何错误，在子类中将道具从父级传递给子级:error="$v.buyer_name.$error", :isValid="!$v.buyer_name.$invalid" 已初始化``` :class="{ 'is-invalid': error, 'is-valid': isValid }"```

标签： vue.js vuex vue-router

【解决方案1】：

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

“class”为保留属性，不能作为组件prop。

所以使用另一个名字，例如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>

【讨论】：