个人中心
gpt4 book ai didi

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

转载 作者：知者 更新时间：2024-03-13 07:55:02 26 4
gpt4 key购买 nike

在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标签。
这两个元素都可以解决该问题

26 4 0
文章推荐： 数据结构笔记
文章推荐： Vue组件开发——异步组件
文章推荐： 被mybatis一级缓存坑了
文章推荐： 计算机网络（四）传输层
知者
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com