vue js에서 소품으로 수업을 통과합니까?

vue js에서 소품으로 수업을 통과합니까?

이것은 bind:class를 2개의 자 컴포넌트로 송신하는 부모 컴포넌트입니다.

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

속성을 사용할 수 없습니다.class부모 요소의 클래스를 렌더링하기 위해 예약되어 있기 때문입니다.이를 시도하면 콘솔에 다음과 같은 경고가 표시됩니다.

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

언급URL : https://stackoverflow.com/questions/65827288/pass-class-as-props-in-vue-js