详细问题描述
[内容]
组件中使用slot
father.vue:
<child>
<view slot="content">
xxxxxxx
</view>
<child>
<script>
</script>
child.vue:
<view>
<slot name="content"></slot>
</view>
此处省略js 中的配置
这是运行微信,还有app 会出现 Template "data-v-5008afa5-content-1" not found
打开编译的目录查看确实没有这个
重现步骤
[步骤] 打开father.vue , child.vue 不断的修改编译ctrl+s
[结果] 错误消失,能正常的运行。
[期望] 能正常的编译slot
运行环境
[系统版本] win10企业
[浏览器版本]chrome
[IDE版本] HBX 最新
[mui版本]最新
附件
[代码片段]
1.vue
<ImageUploader class="shop-swiper" :pictures="pictures" top="260" maxSize="6" @toggle.user="toggle" />
image-uploader.vue
<SliderPanel :display="isPanelDisplay" :title="编辑图片">
<view slot="content">
<view class="item-box row-between" v-for="(item,index) in pictures" :key="index">
<!--展现区域-->
<view class="item-header-box">
<text class="lg mr20">{{index + 1}}</text>
<image class="icon-xl" :src="item"></image>
<text class="ml20" v-if="index == 0">(封面)</text>
<text class="muted ml20" v-else>(细节)</text>
</view>
<!-- 操作区域 -->
<view class="item-footer-box">
<image class="icon-lg images" v-if="index != 0" src="../../static/icons/up-arrow.png" @tap="up(index)"></image>
<image class="icon-lg images" v-if="index != pictures.length - 1" src="../../static/icons/down-arrow.png" @tap="down(index)"></image>
<image class="icon-lg images" src="../../static/icons/minus.png" @tap="remove(index)"></image>
</view>
</view>
<text class="muted sm mt10 ml20">提示:请点击按钮改变图片顺序,第一张图片为封面</text>
</view>
</SliderPanel>
slider_panel.vue
<!--内容槽位-->
<scroll-view scroll-y="true" class="content-box" v-bind:style="{'background-color':backgroundColor}">
<slot name="content"></slot>
</scroll-view>
[安装包]
联系方式
[QQ] 3602616826
[电话]
2 个回复
青伢子
好像能够部分支持,但是父组件的属性有时候出不进去,有时候可以,不知道什么原因。一希望能够完善,开发组件库,slot是必须的。
Alex_Hu
连标签都不能放