Vue3问题记录

深度选择器

处于 scoped样式中的选择器如果想要做更“深度”的选择，即影响到子组件，可以使用 :deep() 这个伪类:

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

编译过后的结果：

.a[data-v-f2f3eg6] .b {
  /* ... */
}

深度选择器的使用

问题：Vue3深度选择器无法生效场景

<template>
  <p>count：{{ count }}</p>
   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" @change="change" />
</template>

<style scoped>
#app :deep(.world) {
  color: orange;
}
</style>

解决：在Vue3中，在<template>模板里添加一个父标签，然后用父标签包裹要穿透的样式代码

<template>
  <div id="container">
    <p>count：{{ count }}</p>
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" @change="change" />
  </div>
</template>

<style scoped>
#container :deep(.world) {
  color: orange;
}
</style>