DDR爱好者之家

浅谈关于.vue文件中style的scoped属性
站长资源 2024/11/27 佚名
80 1538
DDR爱好者之家 Design By 杰米

本文介绍了.vue文件中style的scoped属性以及踩到的坑，具体如下：

scoped可以实现style只作用于当前的.vue文件

<template>
  <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
  color:#333;
}
</style>

上面的文件渲染出的dom结构会是这样的

<div data-v-53795c54 class="user"></div>

css样式是这样的

.user[data-v-53795c54] {
  color:#333;
}

这样就现实了样式只作用于当前.vue文件。

问题：添加scoped属性后样式不起作用

原因是，css被构建成.user[data-v-53795c54] 但是doc节点依然是普通的<div class="user"></div>，导致样式不能作用在dom上而失效。

原因在引用的组件上，解决的方法是将scoped属性关闭。

scoped关闭时的使用建议

如果需要将scoped关闭，那么style就是作用于整个单页应用

可是我们仍然想要样式之作用于当前的.vue文件，减少对其他文件样式的影响

1、给template下的根节点加一个class，并基于这个class添加样式

<template>
<div class="user">
<p class="name">zaunk</p>
</div>
</template>
<script>

</script>

<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}
</style>

2、基于第一条建议，不要有定义两个相同class名称的根节点，因为都作用于整个单页会有一个失效。

3、不要使用 span {}这种做样式设置。因为

<template>
<div class="user">
<el-button class="name">zaunk</el-button>
</div>
</template>
<style lang='less>
.user {
color:#333;
span {
color:#122222;
}
}
</style>

上面的样式同样会作用于组件el-button,这是很危险的

在vue组件中style scoped中遇到的坑

浅谈关于.vue文件中style的scoped属性

在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件，同样的，如果子组件也用scoped标识了，那么在父组件中是不能设置子组件中的节点的。若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式，我在用vue-quill-editor富文本编辑器的时候就遇到了这个坑，我只是想让内容区设置一个高度，这样的话，是必须在App.vue中设置的，我们App.vue相当于根容器，没有设置scoped，所以是可以设置的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米