vue scoped deep
时间: 2023-05-10 19:01:16 浏览: 114
vue scoped deep是指在vue的单文件组件中通过<style>s标签中的scoped属性创建的样式只能够作用于该组件本身,不能够影响到组件中的子组件。如果想要让scoped样式也能够作用于子组件,需要通过设置深度作用选择器/deep/或>>>。这两种方式都可以让当前组件的scoped样式作用于子组件,但是/deep/也会影响到子组件内的所有选择器,而>>>仅仅是影响到了首层子组件的选择器。
例如,在一个父组件中,有一个使用了scoped样式的子组件,我们想让子组件内的一个子组件也应用这个样式。使用/deep/的方式是这样写的:
```
<template>
<div>
<my-child>
<my-grandchild></my-grandchild>
</my-child>
</div>
</template>
<style scoped>
/* 作用于my-child组件 */
/deep/ .child-element {
color: red;
}
</style>
```
这样写会导致my-grandchild组件也会应用这个样式。如果要使用>>>方式,就只需要这样写:
```
<template>
<div>
<my-child>
<my-grandchild></my-grandchild>
</my-child>
</div>
</template>
<style scoped>
/* 作用于my-child组件 */
>>> .child-element {
color: red;
}
</style>
```
这样写只会应用于my-child组件首层子组件,也就是my-grandchild组件不会应用这个样式。
阅读全文