<!-- 插槽 -->
<template>
<view class="board">
<view>组件1111</view>
<slot></slot>
</view>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
</script>
<style>
.board{
display: flex;
flex-direction: column;
background-color: red;
}
</style>
<!-- 使用插槽 -->
<template>
<boardPage>
<view class="page">2222222222222</view>
<!-- 插槽中的组件,样式不生效 -->
<publishPage></publishPage>
</boardPage>
</template>
<script setup>
import boardPage from "@/components/boardPage/boardPage.vue";
import publishPage from "../publishPage/publishPage.vue";
</script>
<style>
.page{
background-color: aqua;
}
</style>
<!-- 组件 -->
<template>
<view class="container">
<view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>
<text class="intro">详见:</text>
</view>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
</script>
<style>
<!-- 样式不生效 -->
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
background-color: saddlebrown;
}
</style>

- 发布:2023-03-25 14:10
- 更新:2023-03-27 13:05
- 阅读:373
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.7.9
第三方开发者工具版本号: 1.06.2303060
基础库版本号: 2.30.2
项目创建方式: HBuilderX
示例代码:
操作步骤:
<!-- 插槽 -->
<template>
<view class="board">
<view>组件1111</view>
<slot></slot>
</view>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
</script>
<style>
.board{
display: flex;
flex-direction: column;
background-color: red;
}
</style>
<!-- 使用插槽 -->
<template>
<boardPage>
<view class="page">2222222222222</view>
<!-- 插槽中的组件,样式不生效 -->
<publishPage></publishPage>
</boardPage>
</template>
<script setup>
import boardPage from "@/components/boardPage/boardPage.vue";
import publishPage from "../publishPage/publishPage.vue";
</script>
<style>
.page{
background-color: aqua;
}
</style>
<!-- 组件 -->
<template>
<view class="container">
<view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>
<text class="intro">详见:</text>
</view>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
</script>
<style>
<!-- 样式不生效 -->
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
background-color: saddlebrown;
}
</style>
<!-- 插槽 -->
<template>
<view class="board">
<view>组件1111</view>
<slot></slot>
</view>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
</script>
<style>
.board{
display: flex;
flex-direction: column;
background-color: red;
}
</style>
<!-- 使用插槽 -->
<template>
<boardPage>
<view class="page">2222222222222</view>
<!-- 插槽中的组件,样式不生效 -->
<publishPage></publishPage>
</boardPage>
</template>
<script setup>
import boardPage from "@/components/boardPage/boardPage.vue";
import publishPage from "../publishPage/publishPage.vue";
</script>
<style>
.page{
background-color: aqua;
}
</style>
<!-- 组件 -->
<template>
<view class="container">
<view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>
<text class="intro">详见:</text>
</view>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
</script>
<style>
<!-- 样式不生效 -->
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
background-color: saddlebrown;
}
</style>
预期结果:
插槽内的组件里的样式生效
插槽内的组件里的样式生效
实际结果:
3.7.9和3.7.8,插槽内的组件里的样式不生效。3.6.18无此问题。
3.7.9和3.7.8,插槽内的组件里的样式不生效。3.6.18无此问题。

Edmin (作者)
微信小程序,publishPage中的container类名,样式不生效
Edmin (作者)
代码我是一样的,第一张图和第二张图的区别,明显第一张图样式没生效。3.7.8和3.7.9样式是不生效的。而3.6.18没问题。
2023-03-27 12:56
DCloud_UNI_WZF
回复 Edmin: 可重新安装对应版本编译器再试下,如确认框架问题,私信提供下联系方式或远程方式看下
2023-03-27 13:02
Edmin (作者)
回复 DCloud_UNI_WZF: 已上传附件,可再次测试。
2023-03-27 13:06