uni-app 【报Bug】vue组件样式不写scoped属性 启动第一次编译默认是scoped,修改组件热更新后恢复正常

uni-app 【报Bug】vue组件样式不写scoped属性 启动第一次编译默认是scoped,修改组件热更新后恢复正常

示例代码：

<template>  
  <view class="content">  
    <group>  
      <group-body>  
        <textarea-group></textarea-group>  
      </group-body>  
    </group>  
  </view>  
</template>  

<script>  
import Group from "../../components/Group.vue";  
import GroupBody from "../../components/GroupBody.vue";  
import TextareaGroup from "../../components/TextareaGroup.vue";  

export default {  
  components: {TextareaGroup, GroupBody, Group},  
  data() {  
    return {  
      title: 'Hello',  
    }  
  },  
  onLoad() {},  
  methods: {},  
}  
</script>  

<style>  

</style>

操作步骤：

• 重新运行项目

预期结果：

修改GroupHeader.vue触发热更新后查看TextareaGroup.vue组件的 .header-title

.group-header > .header-title {  
    display: inline-block;  
    font-size: 16px;  
    font-weight: bold;  
    flex-grow: 1;  
    padding-left: 10px;  
}

实际结果：

重新运行项目后 .group-header 带有作用域

.group-header[data-v-fe515197] {  
    display: flex;  
    padding: 10px 5px 10px 10px;  
    background-color: #d4ebff;  
    color: #646cff;  
    align-items: center;  
    flex-grow: 1;  
    line-height: 24px;  
    box-sizing: border-box;  
}

bug描述：

我创建一个Group组件,把Group组件拆分成GroupHeader, GroupBody组件; 我又创建了一个TextareaGroup组件 并复用Group, GroupHeader, GroupBody组件的结构,并使用子组件中的class; 然后就出现了scoped问题.

Group.vue组件

<template>  
  <view class="group">  
    <slot name="header">  
      <group-header/>  
    </slot>  
    <slot>  
      <group-body/>  
    </slot>  
  </view>  
</template>  

<script setup>  
import GroupHeader from './GroupHeader.vue';  
import GroupBody from './GroupBody.vue';  
</script>  

<style lang="scss">  
.group {  
  display: flex;  
  flex-direction: column;  
  margin-bottom: 10px;  
  border: 1px solid #d4ebff;  
  border-radius: 5px;  
}  
</style>

GroupHeader.vue组件

<template>  
    <view class="group-header">  
        <slot>  
        <image class="header-icon" src="/static/logo.png"></image>  
        <text class="header-title" v-text="title"></text>  
        <i class="header-icon close-icon">X</i>  
        </slot>  
    </view>  
</template>  

<script setup>  
const props = defineProps({  
  title: { type: String, default: '标题' }  
})  
</script>  

<style lang="scss">  

.group-header{  
  display: flex;  
  padding: 10px 5px 10px 10px;  
  background-color: #d4ebff;  
  color: #646cff;  
  align-items: center;  
  flex-grow: 1;  
  line-height: 24px;  
  box-sizing: border-box;  
  >.header-icon{  
    display: inline-block;  
    width: 24px;  
    height: 24px;  
    text-align: center;  
  }  
  >:last-child.header-icon{  
    width: 24px;  
  }  
  >.header-title{  
    display: inline-block;  
    font-size: 16px;  
    font-weight: bold;  
    flex-grow: 1;  
    padding-left: 10px;  
  }  
  >:first-child.header-title{  
    padding-left: 0;  
  }  
}  
</style>

GroupBody.vue 组件

<template>  
    <view class="group-body">  
    <slot></slot>  
    </view>  
</template>  

<script>  

</script>  

<style lang="scss">  
.group-body{  
  padding: 10px 0 0 10px;  
  >.group{  
    border-right: none;  
  }  
}  
</style>

TextareaGroup.vue组件

在TextareaGroup组件中复用GroupHeader.vue组件 class header-title

<script setup>  

import Group from "./Group.vue";  
import GroupHeader from "./GroupHeader.vue";  
import GroupBody from "./GroupBody.vue";  
</script>  

<template>  
  <group>  
    <template #header>  
      <group-header>  
        <image class="header-icon" src="/static/logo.png"></image>  
        <text class="header-title" v-text="'文本域'"></text>  
        <i class="header-icon close-icon">X</i>  
      </group-header>  
    </template>  
    <GroupBody>  
      <textarea class="textarea" placeholder="请输入内容" rows="5"></textarea>  
    </GroupBody>  
  </group>  
</template>  

<style lang="scss">  
  .textarea{  
    display: block;  
  }  
</style>

style-scoped-bug.zip