vue中修改子组件样式

  项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父组件修改子组件的样式。不想混用本地和全局样式,所以选择了>>>,但是并不起作用,就换成/deep/,其实到这里我也没有继续深入这个知识点,因为在浏览器里预览后已经实现了原型图的样式,直到打包在手机上测试,发现问题,在手机上浏览并没有将样式修改过来。如下图:

vue中修改子组件样式

vue中修改子组件样式

 

问题:①为什么使用>>>不起作用?②为什么我使用了/deep/却没有成功的在手机上将样式修改过来?

二、相关知识点

  ㈠关于vue中使用scoped属性

在vue组件中,在style标签中添加scoped属性,这样在这里定义的css只作用于当前组件中的元素,可使组件之间的样式不会相互污染,使样式私有化。比如在父组件内使用子组件,父组件的样式不会渗透到子组件中。

  Ⅰ、在加上scoped后,会为DOM节点自动添加一个唯一的属性(data-v-f3f3eg9后面这串数字像是独一无二的hash值),以保证其唯一性。同时在相应的css选择器末尾,也加上了当前组件的data-v-f3f3eg9属性,来使其私有化。

如Vue Loader中所给出的代码示例:

<template> <div class="example">hi</div> </template> <style scoped> .example { color: red; } </style>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyszsw.html