详细问题描述
在自定义组件模式下，slot填充的内容和slot父节点平级
重现步骤
组件代码：
<template>
<view class="test-component parent">
<slot name="dd"></slot>
</view>
</template>
<script>
export default {
name: 'test',
data() {
return {
}
},
}
</script>页面代码
<template>
<test>
<template slot="dd">
<view class="child">
测试组件自定义模式
</view>
</template>
</test>
</template>
<script>
import test from '@/components/common/test';
export default {
components: {test},
data() {
return {
}
},
}
</script>
[结果]
<page>
<test is="components/common/test"bind:__l="__l">
#shadow-root
<view class="test-component test-component parent parent"></view>
<view>
<view class="child">测试组件自定义模式</view>
</view>
</test>
</page>
[期望]
<page>
<view class="_view M3a8fe1c4 test-component parent">
<view class="_view M220a2223 child">测试组件自定义模式</view>
</view>
</page>
h***@163.com (作者)
<swiper :current="tabIndex" class="swiper-box" :duration="duration" @change="changeTab">
<slot name="tabContent"></slot>
</swiper>
<template slot="tabContent">
<swiper-item class="swiper-item" item-id="0">
</swiper-item>
这种的就不生效了
2019-09-23 15:31
DCloud_uniCloud_WYQ
swiper下面只能接收swiper-item作为子节点，你把swiper-item放到swiper里面看看，然后在swiper-item里面放slot
2019-09-23 15:36
h***@163.com (作者)
回复 DCloud_uniCloud_WYQ: 子组件如果包含slot，则子组件根节点的class就被丢弃了，另外在slot内容外面加了个view，这只能在template上加class了，这样太不友好了
<tab @changeTab="tabChange">
<template style="width: 100%; display: flex;" slot="tab">
<tab-item class="swiper-tab-list" :index="0">未整改</tab-item>
<tab-item class="swiper-tab-list" :index="1">已整改</tab-item>
</template>
</tab>
template上的style是针对slot内容加了一个view
tab-item上的class是针对tab-item组件根节点view的class被丢弃了
2019-09-23 16:22
DCloud_uniCloud_WYQ
回复 h***@163.com: 你把你的代码打包发来一下吧，删减到有问题这块就行了
2019-09-23 16:47
h***@163.com (作者)
回复 DCloud_uniCloud_WYQ: 请参考下面上传的附件
2019-09-23 17:42
h***@163.com (作者)
h5下面没有问题，微信小程序和APP下有问题
2019-09-23 17:43