美文网首页
/deep/ 深度选择器及用法

/deep/ 深度选择器及用法

作者: w龙 | 来源:发表于2019-08-29 19:25 被阅读0次

    在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。

    父组件:

    <template>
        <div>
            <h1 class="title">{{ name }}</h1>
            <input type="text" v-model.lazy="name">
            <child />
        </div>
    </template>
    
    <script>
    import child from './child';
    export default {
        data () {
            return {
                name:''
            }
        },
        components: {
            child
        }
    }
    </script>
    <style scoped>
         .title{
            color: #ff0;
        }
    </style>
    
    

    但是这样也存在着一个问题,比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式。或者在引入第三方的插件如vant.ui element.ui 修改里面的样式的时候可以这样写会覆盖里面样式

    <style scoped>
         /deep/ .title{
            color: #ff0;
        }
    </style>
    

    相关文章

      网友评论

          本文标题:/deep/ 深度选择器及用法

          本文链接:https://www.haomeiwen.com/subject/ynswectx.html