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

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

        父子组件都在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>

原文地址：https://blog.csdn.net/weixin_74261199/article/details/142814999

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！