手机项目中有个tabBar,不知道有什么好的实现办法,自己的想法是把tabBar写成一个组件
在哪个页面,底部tabBar也需要显示不一样的样式,由此就出来了,
Vue在父组件中改变子组件内的某个样式
首先看父组件:
<template> <div class="cont"> <footEr></footEr> </div> </template> <script> import footEr from '../../components/foot.vue' components: {footEr} </script> <style scoped> </style>
子组件:
<template> <div> <!-- 底部 --> <div class="footer"> <div class="index"> <p>菜单1</p> </div> <div> <p>菜单2</p> </div> <div> <p>菜单3</p> </div> <div> <p>菜单4</p> </div> </div> </div> </template> <script> export default { data() { return { }; } } </script> <style> .footer{ border-top: 1px solid #999999; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 59px; padding-top: 6px; background: #FFFFFF; } .footer div{ flex: 1; text-align: center; color: #808080; } </style>
初始样式:
style因为加了 scoper 只对当前组件起作用,那么直接在父组件中写子组件的样式是不会生效的
<template> <div class="cont"> <footEr></footEr> </div> </template> <script> import footEr from '../../components/foot.vue' components: {footEr} </script> <style scoped> .footer .index { color: #2a82e4; } </style>
一种办法是父组件中的style去掉scoped,这种办法多半是不可取的,因为可能会影响全局样式
第二种办法就是深度作用选择器( >>> 操作符)
<template> <div class="cont"> <footEr></footEr> </div> </template> <script> import footEr from '../../components/foot.vue' components: {footEr} </script> <style scoped> .cont >>> .index { /*cont是父组件包裹子组件的类名,index是子组件中要修改样式的类名*/ color: #2a82e4; } </style>
修改成功后的样式:
如果是有些像Sass、less之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
操作符取而代之——这是一个 >>>
的别名,同样可以正常工作。如下:
<style scoped lang="scss"> .cont{ /deep/ .index{ color: #2a82e4; } } </style>
上述方法只针对于子组件内部的样式