Vue.js의 범위 모드에서 하위 구성 요소의 내부 레이블 스타일을 수정하는 방법

이 글에서는 Vue.js의 범위 지정 모드에서 하위 구성 요소의 내부 레이블 스타일을 수정하는 방법을 공유하겠습니다. 내용이 꽤 좋아서 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

Vue.js 프로젝트에서는 일반적으로 다음을 추가합니다. scoped 속성을 c9ccee2e6ea535a969eb3f532ad9fe89 태그에 추가하여 다음 코드에 표시된 대로 구성 요소에 대한 고유 속성을 생성합니다.

my-comp.vue

<template>
  <p class="my-comp">
    <span>my comp</span>
  </p>
</template>

<script>
  export default {
  }
</script>

<style scoped>
</style>

Generate html에서는 p와 모든 하위 태그에 data-v-0a679ea0 식별 속성이 있음을 알 수 있습니다. 이 속성은 c9ccee2e6ea535a969eb3f532ad9fe89에 scoped를 추가한 결과입니다. scoped를 추가하지 마세요. 이 식별 속성은 생성되지 않습니다.

이 식별 속성이 제공하는 한 가지 이점은 구성 요소 내의 스타일이 다른 구성 요소의 레이블에 영향을 미치지 않는다는 것입니다. my-comp 구성 요소에 다음 스타일을 썼다고 상상해 보세요.

<style>
  span {
    color: red;
  }
</style>

이 스타일은 다음과 같습니다. 매우 일반적인 스타일입니다. 다른 구성 요소에 span 태그가 있으면 이 태그에 적용됩니다. scoped를 추가하면 최종 생성된 스타일은 다음과 같습니다.

<style scoped>
  span { color: red; }
</style>
//生成后如下
<style>
  span[data-v-0a679ea0] {
    color: red;
  }
</style>

span[data- v-0a679ea0 ]식별 속성은 구성 요소마다 고유하므로 이 스타일은 자체 구성 요소의 범위에만 적용됩니다.

컴포넌트 A를 컴포넌트 B 안에 넣으면 이 식별 속성이 어떻게 생성되는지 살펴보겠습니다.

home.vue

<template>
  <p class="home">
    <my-compo></my-compo>
  </p>
</template>

<script>
  import MyCompo from &#39;./my-comp&#39;
  export default {
    components: {MyCompo}
  }
</script>

<style scoped>
</style>

생성된 HTML 코드는 다음과 같습니다.

data-v-957c7522는 home 구성 요소의 식별 속성이며 이 속성은 있다 구성 요소 루트의 my -comp에도 추가되었지만 my-comp의 span 태그는 data-v-957c7522 식별 속성을 추가하지 않습니다. 왜냐하면 이 span 는 my-comp 컴포넌트 내부의 태그이고, 표시되지 않은 내용은 home 컴포넌트에 적혀 있습니다.

그러나 때로는 my-comp의 태그를 수정하기 위해 홈 구성 요소에 스타일을 작성해야 하는 상황이 있습니다.

아래 코드를 보세요:

이 코드는 홈 구성 요소에 속합니다

<style scoped>
  .my-comp span {
    color: blue;
  }
</style>

하지만 이 코드는 변경되지 않습니다45a2772a6b6107b401db3c9b82c049c2my comp54bdf357c58b8a65c66d7c19c8e4d114 색상은 이 스타일의 최종 생성된 모양이 다음과 같기 때문입니다.

my-comp span 태그에는 로고 data-v-957c9522 속성이 없습니다. .

이 문제를 해결하는 방법은 무엇입니까?

홈 구성 요소의 범위를 제거하면 문제를 해결할 수 있지만 이는 권장되지 않습니다. 위에서 언급한 것처럼 범위가 없는 스타일은 다른 구성 요소에 쉽게 영향을 미칠 수 있습니다.

less와 같은 스타일 언어를 사용하는 경우 매우 좋은 해결책이 있습니다. 다음 코드를 살펴보세요.

<style lang="less" scoped>
  @deep: ~&#39;>>>&#39;;
  .my-comp @{deep} span {
    color: blue;
  }
</style>

최종 생성된 스타일이 어떤 모습인지 살펴보겠습니다.

identity 속성이 span에서 .my-comp로 이동되었습니다. 따라서 이 스타일은 my-comp 구성 요소의 내부 span 태그에 잘 적용될 수 있으며 다른 구성 요소에는 영향을 미치지 않습니다.

위 내용은 Vue.js의 범위 모드에서 하위 구성 요소의 내부 레이블 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!