网址建站,建设网站前言,毕业设计做网站论文,成都微信微网站建设1. 前言
本次我们主要结合一些案例研究一下vue的插槽中样式污染问题。在这篇文章中#xff0c;我们主要关注以下两点:
父组件的样式是否会影响子组件的样式#xff1f;子组件的样式是否会影响父组件定义的插槽部分的样式#xff1f;
2. 准备代码
2.1 父组件代码
te…1. 前言
本次我们主要结合一些案例研究一下vue的插槽中样式污染问题。在这篇文章中我们主要关注以下两点:
父组件的样式是否会影响子组件的样式子组件的样式是否会影响父组件定义的插槽部分的样式
2. 准备代码
2.1 父组件代码
templatediv classwrapdivparent-root/divAdiv slot-parentdiv classcontainerparent_content/div/div/A/div
/template
script langts setup
import A from ./A.vue;
/script
style langscss scoped
.wrap{width: 400px;height: 400px;background-color: lightgreen;color: red;
}
.container{background-color: lightcoral;
}
/style2.2 子组件代码
templatediv classwrap childdivchild-header/divslot/slotdiv classcontainerchild-footer/div/div
/template
script langts setup
/script
style langscss scoped
.container{width: 100px;height: 100px;background-color: lightblue;
}
.wrap{border: 1px solid black;
}
/style2.3 最终编译的代码 通过上面的代码我们得出几个结论
子组件的顶级标签会继承父组件的文件指纹。子组件的插槽(父级定义的插槽代码)的顶级标签不会继承子组件的文件指纹。
3. 问题分析
3.1 父组件是否污染子组件问题
通过上面的分析我们知道父组件的文件指纹会继承到子组件的顶级标签上也就是说父组件的样式有可能会影响子组件的样式。 比如我们在父组件中定义了wrap的样式
.wrap{width: 400px;height: 400px;background-color: lightgreen;color: red;
}那么他生成的代码如下 此时我们发现在父组件定义的wrap样式在子组件的顶级标签仍然起作用。此时就会污染子组件。 目前我还没有比较好的解决方案只能在实际开发中对于类名的命名尽量避免相同。 3.2 子组件是否会污染插槽中的样式
通过上面的分析我们知道插槽中的html片段并不会携带子组件的文件指纹。由于在子组件定义的样式都会携带子组件的文件指纹所以子组件定义的样式并不会影响插槽中html片段的样式。 当然这个假定也都是在不使用v-deep的前提下生效。如果掺杂v-deep呢
3.3 v-deep下子组件插槽样式的污染情况
父组件代码
templatediv classwrapdivparent-root/divAdiv slot-parentdiv classcontainerparent_content/div/div/A/div
/template
script langts setup
import A from ./A.vue;
/script
style langscss scoped
.wrap{width: 400px;height: 400px;background-color: lightgreen;color: red;
}
.container{background-color: lightcoral;
}
/style子组件代码
templatediv classwrap childdivchild-header/divslot/slotdiv classcontainerchild-footer/div/div
/template
script langts setup
/script
style langscss scoped
.container{width: 100px;height: 100px;background-color: lightblue;
}
.wrap{border: 1px solid black;::v-deep .container{border: 5px dashed lightsalmon;}
}
/style通过上面分析的代码我们发现parent_content所在的标签和child-footer所在的标签都生效了也就是说子组件的样式污染了父组件的标签。 这一点在开发中要注意要慎重使用v-deep不然会产生难以预料的结果。这里有可能有人会想在最后加一个v-deep就行了呗。 而实际事与愿违因为对于多个v-deepvue只能识别出第一个后面的会按照样式名为v-deep进行渲染。
.wrap{border: 1px solid black;::v-deep .container::v-deep{border: 5px dashed lightsalmon;}
}
