父页面:
<template>
<view class="content">
<aaaaa>
<template v-slot:default>111111111</template>
</aaaaa>
</view>
</template>
aaaaa组件:
<template>
<view class="aaaaaa">
<slot name="default"></slot>
</view>
</template>
<script>
export default {
options: {
styleIsolation: 'shared',
virtualHost: true,
},
externalClasses: ['class'],
data() {
return { }
},
onLoad() { },
methods: { },
}
</script>
h5生成结果:
<view class="content">
<view class="aaaaaa">111111111</view>
</view>
微信小程序生成结果(111111外面多了一层<view>):
<view class="content">
<view class="aaaaaa">
<view>111111111</view>
</view>
</view>
在组件中使用<template>会在小程序中多生成一个div,问下这个怎么解决?
测试结果:
插槽不能传值,且插槽内容必须且只能有一个根节点,否则就会多一层view
多一层view的情况
<template v-slot:default="{ data }"> //插槽传值
<view class="b">111111111</view>
</template>
<template v-slot:default> //内容多根节点
<view class="a">111111111</view>
<view class="b">111111111</view>
</template>
<template v-slot:default>11111111</template> //没有根节点
正常情况:
<template v-slot:default>
<view class="a">111111111</view>
</template>
2 个回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信
小程序平台强制在 slot 上使用 view 进行包装,你目前可以参考 https://github.com/dcloudio/uni-app/issues/4629 进行兼容
西恩十月
小程序是这样的,具体你可以研究一下 virtualHost 概念,virtualHost:true,可以 把自定义节点设置成虚拟的,更加接近Vue组件的表现,可以去掉微信小程序自定义组件多出的最外层标签
1***@qq.com (作者)
已经是virtualHost:true了。你没明白我的意思,我是想表达小程序里面class="aaaaaa"这个view里面还多了一层<view>,而h5是没有的
h5
小程序加virtualHost:
小程序不加virtualHost
2024-01-04 09:16