商业网_站长之家官网查询_网站优化与seo_许昌seo推广

---

一、scoped是什么

我们知道vue为了防止css样式污染，在每个组件中提供了 scoped属性进行限定css作用域；当<style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>

二、应用案例

1.使用代码

School.vue

<template><div class="demo"><h2 class="title">学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div>
</template><script>export default {name:'School',data() {return {name:'vue学院',address:'上海黄浦区',}}}
</script><style scoped>.demo{background-color: skyblue;}
</style>

Student.vue

<template><div class="demo"><h2 class="title">学生姓名：{{name}}</h2><h2 class="sex">学生性别：{{sex}}</h2></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男'}}}
</script><style lang="less" scoped>.demo{background-color: pink;.sex{font-size: 50px;background: red;}}
</style>

App.vue

<template><div><h2 class="title">hello world</h2><School></School><hr><Student></Student></div>
</template><script>import Student from './components/Student.vue';import School from './components/School.vue';export default {name:'App',components:{Student,School},data() {return {}},}
</script><style scoped>.title{color: red;}
</style>

2.原理

我们可以看到，各自组件加上scoped属性之后，对应的样式标签元素会随机生成一个
[data-v-2232xxxx]这样的属性，来保证每个组件样式互不干扰。
代码如下（示例）：

3父组件App未添加scoped影响

父组件的样式会应用到子组件上

---