[에러] vue.js v-deep 사용 시 발생하는 warning

vue.js 메인 이미지

 

v-deep 사용 시 발생 에러(경고)

@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

 

실행 환경

Vue.js 2.6.11
Node.js 16.20.0

 

 

사용 사례

v-html 을 사용하게 html 텍스트를 넣고 html 텍스트 내에 위치한 element에 추가적인 style을 입히고 싶을 때 사용하는 v-deep 요소

<template>
  <div class="container">
    <h1>Deep Test Page</h1>
    <div class="text-wrapper">
      <div class="contents" v-html="contents"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeepPage',
  data() {
    return {
      contents:
        "<span class='point-content'>Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry.",
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100px;
  padding-top: 20px;
  text-align: center;

  .text-wrapper {
    padding: 20px 0;

    .contents {
      font-size: 18px;

      &::v-deep .point-content {
        font-weight: bold;
        font-style: italic;
      }
    }
  }
}
</style>

 

 

위의 코드를 실행하면 빌드를 하거나 서버 실행 창에 아래와 같은 경고 메시지가 발생합니다.

@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

 

vue.js 2버전에서는 ::v-deep 속성은 이제 권장하지 않는 방식이 되었습니다.

같은 기능을 사용하고 싶다면 ::v-deep 대신 :deep 속성을 사용하면 됩니다.

아래와 같이 변경하면 경고는 사라집니다.

// ::v-deep을 :deep 으로 바꾸고 
// 하위에 있던 selector를 파라미터 값으로 입력
&:deep(.point-content) {
    font-weight: bold;
    font-style: italic;
}

 

완성된 코드

<template>
  <div class="container">
    <h1>Deep Test Page</h1>
    <div class="text-wrapper">
      <div class="contents" v-html="contents"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeepPage',
  data() {
    return {
      contents:
        "<span class='point-content'>Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry.",
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100px;
  padding-top: 20px;
  text-align: center;

  .text-wrapper {
    padding: 20px 0;

    .contents {
      font-size: 18px;

      &:deep(.point-content) {
        font-weight: bold;
        font-style: italic;
      }
    }
  }
}
</style>

 

실행화면