在vue中style标签中设置scoped属性,存在穿透问题

x33g5p2x  于2022-02-12 转载在 Vue.js  
字(0.8k)|赞(0)|评价(0)|浏览(195)

在vue中,我们在style标签中设置scoped属性的目的是将style中的样式仅仅作用在当前文件中,但是存在一种情况。

//父组件
<template>
  <h1>我是APP中的h1</h1>
  <HelloWorld></HelloWorld>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>
//子组件
<template>
  <h1>我是HelloWorld</h1>
</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style scoped>

</style>

最终表现的结果为:

明明我们在父组件中将h1的颜色设置为red,但是在其子组件的h1也设置为red。接下来我们将探究原因。
原因:
在浏览器中我们打开控制台,查看源代码,我们会发现h1上存在一个属性data-v-7ba5bd90,并且在样式中通过该属性来设置属性值。

因为当我们在父组件中通过标签设置样式时,会给每一个子组件最外层添加该标签设置的属性。
解决方法:

1、将标签样式设置为class样式
2、在子组件外层包裹一层div标签。
这两个元素都可以解决该问题

相关文章

微信公众号

最新文章

更多