关于vue.js:vue-scope和deep穿透原理

31次阅读

共计 1159 个字符，预计需要花费 3 分钟才能阅读完成。

如果 vue 组件有带 scoped 的 style,postcss 编译时

会为该组件内所有 dom 元素都加一个【标识组件惟一】的动静属性[哈希值,data-v- 实例标识](这里 dom，包含 [一般 dom 元素] 和 [子组件的根元素] )
为 style<scoped> 标签下所有，不蕴含 [deep 深度选择器] 的选择器最初一级增加属性选择器[哈希值,data-v- 实例标识]

<div class="a">
    <div class="b"> 登录 </div>
</div>
<style lang="less" scoped>
.a {
  .b {background-color:#bfa}
}
</style>

编译后

<div data-v-257dda99b class="a">
    <div data-v-257dda99b class="b"> 登录 </div>
</div>
<style scoped>
.a .b[data-v-257dda99b] {background-color:#bfa}
</style>

很简略，vue 不会给 深度选择器 前面的选择器单元减少属性选择器[哈希值,data-v- 实例标识]

深度选择器
css 对应 >>>
less/scss 等预处理对应 /deep/ , ::v-deep 和最新的 :v-deep()

// 父组件
<template>
    <div class="parent" id="app">
        <h1> 我是父组件 </h1>
        <child></child>
    </div>
</template>

<style lang="less" scoped>

    // 把子组件的背景变成红色；然而并不起作用
    .child .dyx {background-color: red;}
    // 加上 deep；起作用
    ::v-deep .child .dyx {background-color: red;}
</style>

// 子组件
<template>
    <div class="child">
        <h1> 我是子组件 </h1>
        <div class="dyx">
            <p> 我是子组件的段落 </p>
        </div>
    </div>
</template>

编译后

<div data-v-257dda99b class="parent"  id="app">
    <h1 data-v-257dda99b> 我是父组件 </h1>
    <div data-v-xxxxxxx class="child">
        <h1 data-v-xxxxxxx> 我是子组件 </h1>
        <div data-v-xxxxxxx class="dyx">
            <p data-v-xxxxxxx> 我是子组件的段落 </p>
        </div>
    </div>
</div>

[data-v-257dda99b] .child .dyx {background-color: red;}

.dyx 前面的属性选择器没了，所以款式能够失常穿透到子组件失效。

正文完