Vue子组件样式受到父组件污染

最新推荐文章于 2024-10-03 18:17:36 发布

小李大魔王

最新推荐文章于 2024-10-03 18:17:36 发布

阅读量525

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_74261199/article/details/142352247

版权

今天写了一个搜索组件，利用水平弹簧布局将输入框和搜索按钮排列在一起，但是使用的时候一直是垂直弹簧布局，后来发现：

父子组件都在style标签加了scoped属性时，父组件样式会同步到子组件的根元素（template不算根元素）

子组件(search)如下：

<template>
    <view class="root">
        <input type="text"><view class="search">搜索</view>
    </view>
</template>
<style lang="scss" scoped>

    .root {
        /*  水平弹簧布局  */
        display: flex;
        flex-direction: row;
        
        /*  其他样式    */
        width: 100vw;
        height: 20vh;
        input {
            border: 1px solid lightgray;
            width: 40%;
            height: 5vh;
            padding-left: 2%;
        }
        .search {
            border: 1px solid lightgray;
            width: 15%;
            height: 4vh;
            text-align: center;
            padding-top: 1.7%;
        }
        .search:hover {
            background-color: #f3f3f3;
        }
    }
</style>

父组件如下：

<template>
    <view class="root">
        <search @search="getSearchData"></search>
    </view>
</template>
<style lang="scss" scoped>

    .root {
        /*  垂直弹簧布局  */
        display: flex;
        flex-direction: column;
        
        width: 100vw;
        height: 100vh;
    }
</style>

这里受到污染的原因是父组件的样式同步到了子组件根标签，即子组件根标签中的水平弹簧布局被父组件中的垂直弹簧布局所覆盖，

解决方案是在子组件(search)根标签外包裹一个标签，如：

<template>
    <!--在根元素外加一个标签-->
    <view>
        <!-- 根元素 -->
        <view class="root">
            <input type="text"><view class="search">搜索</view>
        </view>
    </view>
</template>