scope、:deep()

<script setup lang="ts">

import HelloWorld from './components/HelloWorld.vue'

</script>

<template>

  <div>

    <a href="https://vite.dev" target="_blank">

      <img src="/vite.svg" class="logo" alt="Vite logo" />

    </a>

    <a href="https://vuejs.org/" target="_blank">

      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />

    </a>

  </div>

  <!--scoped会自动在组件最外层生成不重复的data属性，里面的元素则不生成，即在浏览器可以看到<HelloWorld data-v-xxx>-->

  <HelloWorld msg="Vite + Vue" class="hello"/>

</template>

<style scoped lang="scss">

.logo {

  height: 6em;

  padding: 1.5em;

  will-change: filter;

  transition: filter 300ms;

}

.logo:hover {

  filter: drop-shadow(0 0 2em #646cffaa);

}

.logo.vue:hover {

  filter: drop-shadow(0 0 2em #42b883aa);

}

// scoped中写选择器样式会默认在样式中带上自动生成的不重复的data属性

.hello { // 即在浏览器中自动会生成的是 .hello[data-v-xxx], 能够对应template中的class的hello和自动生成的data-v-xxx

  color: red;

  // 此处同样是自动生成的是 .number[data-v-aaa], 但是class的number是组件中的元素，不会生成对应的不重复的data属性，则该样式不生效

  // .number {

  //   color: bule;

  // }

  // :deep()是vue3写法，此处生成的是样式是 .hello[data-v-xxx] .number能够对应上对应的元素属性，该样式生效

  // :deep()是让自动生成的不重复data属性，移动至组件最外层

  :deep(.number) {

    color: blue;

  }

}

</style>

 

<template>

  <div>

    123

    <div class="number">

      456

    </div>

  </div>

  </template>

 

  <script setup lang='ts'>

  import { ref, reactive } from 'vue'

 

  </script>

 

  <style scoped lang='scss'>

 

  </style>