vue 中父组件改变子组件样式,以iview组件为例

在组件中需要使用本地样式,即scoped样式文件。在该文件中,父组件无法修改子组件的样式,选择器只能找到子组件的根类。可以使用深度选择器达到目的。
官网方法地址 : https://vue-loader.vuejs.org/zh/guide/scoped-css.html
其中深度作用选择器有三个连接符 : >>> 、/deep/和::v-deep。
如果样式文件是scss、sass等格式,需使用 /deep/。其他两个不生效。
实例:

<script>
<div class="content">
            <Form ref="form" :model="form" :rules="rules" :label-width="80" label-position="left">
                <FormItem label="账  户:" prop="username">
                    <Input type="text" size="large" v-model="form.username" placeholder="请输入用户名" :maxlength="10" autofocus="autofocus">
                    </Input>
                </FormItem>
                <FormItem label="密  码:" prop="pwd">
                    <Input type="password" size="large" v-model="form.pwd" placeholder="请输入密码">
                    </Input>
                </FormItem>
                <Button type="primary" @click="login" class="mybutton">登录</Button>
            </Form>
        </div>
</script>
<style lang="scss" scoped>
.ivu-form /deep/ .ivu-form-item-label {
            color: white;
            font-size: 18px;
        }
        .ivu-form /deep/ .ivu-input {
            height: 42px;
            width: 20vw;
        }
        .ivu-form /deep/ .ivu-btn {
            height: 42px;
            width: 100px;
        }
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。