Vue-bug系列之父子组件的template下的第一个div同名问题

最新推荐文章于 2023-02-28 15:03:25 发布
最新推荐文章于 2023-02-28 15:03:25 发布
阅读量571 收藏
点赞数 4
分类专栏： vue 报错解决 bug 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46594570/article/details/117794097
版权
在商城项目中，遇到滚动页面显示异常的bug，详细问题表现为页面顶部出现一段空白区域，影响了内容展示。经过排查，发现是由于父组件Detail.vue与子组件DetailNavBar.vue的ID属性同名所致。即使在CSS样式中设置了属性，仍然出现了父组件样式影响子组件的情况。解决方案是避免父子组件模板中的首个div使用相同ID或Class，以防止样式混乱。对于为何子组件会受到父组件样式的影响，作者还在寻求更深入的解释。
摘要由CSDN通过智能技术生成

项目场景：

今天在学习商城项目想要实现滑动效果的时候出了一个很莫名其妙的bug，几经周折都没有搞定，最后集齐各方力量才终于解决。小小细节，大大bug再次展现。话不多说，直接上菜！

问题描述：

出现的问题是我的滚动页面出现一段莫名的白色
在这里插入图片描述
想要展示的内容就被挤到下面去了，而滑动效果仅限于此空白区域。
一开始我以为只是CSS样式的相关问题，而且当我去掉父组件的#detail的height: 100vh;时候，空白区域又消失了，所以就一直陷于这个圈里，而没有去关注到真正的问题。

//Detail.vue
<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"></detail
最低0.47元/天 解锁文章
作业布多
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6930
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
前端面试-vue 部分
wanglu458512的博客
09-16 433
一、vue基础 Vue中的MVVM MVVM **(Model-View-ViewModel)**也称(Model-View-Binder) Model数据层，数据和业务逻辑都在Model层中定义； View视图层，在前端开发中通常就是DOM层，主要用于给用户展示各种信息； ViewModel视图模型层，是View和Model沟通的桥梁 响应式原理： Model和ViewModel之间有着双向数据绑定的联系。ViewModel它实现了Data Binding，可以将Model的改变实时的反应到View中。另
vue 多了一层div_Vue template 如何支持多个根结点
weixin_39969953的博客
12-19 910
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。如果你试图创建一个没有根结点的 Vue template，像这样：Node 1Node 2不出意外的话你会得到一个编译错误或者运行时错误，因为 template 必须只有一个根元素。通常你可以在外面套一个div容器来解决。这个容器元素没有显示上的作用，只是为了满足模板编译的单个根节点的要求。Node 1Node 2通常情...
父子类变量名相同会咋样
weixin_30437337的博客
04-25 472
父子变量名相同会令人 “Confusing”。举个例子，新建 ParentClass 类： public class ParentClass { public String name = "parent"; public static void main(String[] args) { ParentClass parentClas...
Java基础之【父子类同名变量的问题】
黄三yeah的Java技术空间
06-18 1069
父子类同名变量的时候，获取变量值的区别 直接看代码以及输出结果即可： 父类 @Data public class Father { public int a=5; } 子类 @Data public class Son extends Father{ public int a=7; public void sonPrint(){ //就是thi...
Vue父子组件的写法
ZHXT__的博客
08-31 976
Vue中父子组件的各种写法: 第一种:传统的写法 <script> //1. 创建组件构造对象;1.必须放在vue的实例中 创建标签<>不要使用大写会识别不出 // 使用语法糖的可以省略第一步,直接将 {template :`...`, }放在component中; const temp= Vue.extend({ ...
解决vue组件间相同命名的class样式干扰的问题
看门猫的博客
02-12 5049
解决vue组件间相同命名的class样式干扰的问题问题描述解决办法使用scoped使用scss 问题描述 比如在文件a.vue中，有以下样式： <style> . .main { height: 38px; } </style> 在文件b.vue中，有以下样式： <style> . .main { height...
VUE之组件（父子与非父子通信）
weixin_45626166的博客
10-30 244
组件组织 通常一个应用会以一棵嵌套的组件树的形式来组织。 日常开发里，我们可以按照功能将一个网页拆分成很多个部分，每个部分就是一个组件。 例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的子组件。 父子组件通信 父子组件传值通信 假设第二层组件想和第一层组件进行通信，分析其传值过程 1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信 2、(第...
【Vue知识点- No4.】vue组件、组件通信、Todo案例
qq_48687155的博客
07-22 800
vue组件、组件通信、Todo案例
js省市级联--避免id冲突
Flying fish的博客
09-19 728
之前在做项目，使用到省市级联，但是那只是使用了网上下载的方法，之之后就遇上了，多个地方使用，出现了id冲突的不可避免的情况，项目期间由于没有时间去查看那么多的代码，所以都使用了最笨的方法解决了。但是这几天我重新写了一遍，用自己最“人性化”的一面去编写
关于template标签用法总结(含vue中的用法总结)
热门推荐
最初的梦想
09-02 23万+
文章目录html5中的template标签template标签操作的属性和方法vue中的template html5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。 <!--当前页面只显示"我是自定义表现abc"这个内容，不...
vue项目中很多页面class名称一样导致样式错乱的解决办法
qq_42750608的博客
11-21 3616
项目中经常子组件被引入父组件,有时候父页面会出现错乱样式,原因就是同名元素选择器互相影响,其他页面的样式影响了当前页面的样式,可以参考以下解决方式: 1.在style标签中写scoped 2.在style不用写scoped,但是最外层的div的class或者id必须是整个项目来看都是唯一的 最外层的选择器+空格+元素本身的选择器写样式,当然由于每个元素前面都写太麻烦可以使用less,styl...
为什么template必须有且只能有一个div呢？
weixin_43258184的博客
08-24 8228
单文件组件 　　当我们在vue-cli脚手架搭建的vue开发环境下使用单文件组件时，一般会这么写： <template> <div class="box"> 这里是页面内容 </div> </template> 如果我们尝试在template标签下写两个div，那么编辑器会提示我们***The template root requires exactly one element。***那这里为什么template下也必须有且只能有一个div呢
自定义v-model事件
Pgy121的博客
09-08 3181
父组件 <template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div> </template> <script> import vModel from '@/components/HelloWorld' export default { name: 'home',
46_父类和子类的同名 成员变量 处理
每天积累一点点
05-19 2100
1、当 父类和子类 成员变量同名时 在子类就近原则 选择本作用域的子类成员 2、如果在子类中 必须使用父类中的同名成员 必须加上父类的作用域。 class Base { //父类的私有数据 一旦涉及继承 在子类中不可见 public: int num; public: Base(int num) { this->num = num; cout<<"Base有参构造int"<<endl; } ~
vue中scoped的样式污染处理
前端小白
08-13 1607
scoped详解，scoped原理，vue中css样式污染
Vue使用router-view标签出现页中页或页面重复的解决方法
makerjack001的博客
02-28 2385
vue2使用router-view出现页面重复的一个解决方案
css 如何选择同一个class下的第一个div?
weixin_42365757的博客
08-25 9813
css 如何选择同一个class下的第一个div? <div class="ms-u"></div> <div class="ms-u"></div> <div class="ms-u"></div> .ms-u:nth-child(1) {......}
vue-admin-template组件互相调用
最新发布
09-29
在Vue中，每个组件都有一个唯一的ref属性，可以通过ref属性获取组件实例，然后调用组件的方法或访问组件的属性。这种方式适用于在父组件中操作子组件。 以上是在vue-admin-template中组件之间互相调用的几种常用...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值