Vue.js: 하위 요소에 CSS 클래스 사용

Vue.js: 하위 요소에 CSS 클래스 사용

나는 구성 요소가 있다.v-popup.vue

<template>
  <div class="overlay">
    <div class="popup">
      <slot></slot>
    </div>
  </div>
</template>

예를 들어, 부모님의 스타일링으로

<template>
  <v-popup class="custom-popup">
    Popup content
  </v-popup>
</template>

<style>
  .custom-popup {
    padding: 20px;
  }
</style>

구성 방법v-popup.vue만들 요소custom-popup자동으로 추가할 클래스div.popup아닌div.overlay?

범위 스타일

• (부모와 자녀 모두) 범위형 스타일을 사용하는 것은 좋은 생각이며 이 솔루션을 더 쉽게 만들 것이다.

• 새 항목을 생성하는 대신custom-popup클래스, 부모에서 딥 선택기를 사용하십시오.이를 통해 부모는 동일한 선택기를 사용하는 자식 구성요소에 대한 추가 스타일을 정의할 수 있다.

• 딥 셀렉터는 다음과 같이 보인다.>>>SCSS/SASS 프리프로세서를 사용하지 않는 경우.그런 다음 다음을 사용하십시오.::v-deep대신에

<template>
  <v-popup>
    Popup content
  </v-popup>
</template>

<style scoped>
  >>> .popup {
    padding: 20px;
  }

  /* If using SCSS/SASS, do this instead */
  /*
  ::v-deep .popup {
    padding: 20px;
  }
  */
</style>

그 아이는 자신의 것을 둘 다 사용할 것이다..popup학급과 부모님의 학급.

범위형 스타일을 사용하지 않았다면 아이를 여러 부모로 수입해 매번 다른 스타일을 사용하고자 한다면 금방 문제가 될 것이다.

v-pop에.vue는 다음을 수행할 수 있다.

<template>
  <div class="overlay">
    <div :class="['popup', popupClass]">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {

// Do the usual implementations here...
props: {
 popupClass: ''
}

}

</script>

그런 다음 상위 구성 요소에서 다음을 수행할 수 있다.

<template>
  <v-popup popup-class="custom-popup">
    Popup content
  </v-popup>
</template>

하지만, 나는 궁금하다.이 클래스를 v-pop에 캡슐화하지 마십시오.나는 부모로부터 이 클래스를 공유하는 다른 구성요소가 없는 한 이 디자인을 거의 사용하지 않는다.

편집(마지막 주석당):$attr 속성을 사용하는 방법에 대한 참조로 이 링크를 사용할 수 있다. https://jsfiddle.net/changjoo_park/pzx08wp9/

따라서 어떤 의미에서 부모 구성 요소에서 다음과 같은 작업을 수행할 수 있다.

<template>
  <v-popup popup-class="custom-popup" v-bind="$attrs">
    Popup content
  </v-popup>
</template>

v-popup 구성 요소에서:

<template>
  <div class="overlay">
    <div :class="['popup', $attrs.popupClass]">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {

// Do the usual implementations here...

}

</script>

따라서 소품 구현과 클래스는 $atters 객체에서 직접 가져온다.이것이 도움이 되기를!이 사용법에 대한 자세한 내용은 https://vuejs.org/v2/api/#vm-attributers를 참조하십시오.

참조URL: https://stackoverflow.com/questions/60590180/vue-js-use-css-class-for-child-element