样式污染示例
一个很简单的例子,在两个组件中都有class名为test的div标签,在ScopedDemo组件中设置test样式,在ScopedChildCpm中没有设置样式。
<template>
<div class="scoped-test-wrap">
<div class="test">样式污染</div>
<ScopedChildCpm></ScopedChildCpm>
</div>
</template>
<script>
import ScopedChildCpm from "./ScopedChildCpm.vue";
export default {
name: "ScopedDemo",
components: { ScopedChildCpm },
};
</script>
<style>
.test {
width: 100px;
height: 50px;
background-color: gold;
margin: 10px;
}
</style>
<template>
<div class="test">child组件</div>
</template>
<script>
export default {
name: "ScopedChildCpm",
};
</script>
<style>
</style>
当运行程序,在浏览器中可以看到,两个组件的样式都改变了。