uni-app中v-for循环渲染带有slot的vue自定义组件时slot中数据内容无效
uni-app中v-for循环渲染带有slot的vue自定义组件时slot中数据内容无效
uni-app中v-for循环渲染带有slot的vue自定义组件渲染slot中数据内容无效
uni-app中如果引入单个组件正常渲染，一旦在外边添加一层block或view的v-for循环如: (item,index) in list ,slot下的数据如item.xxx,item.text等是渲染不出来的。
示例代码
单个组件的渲染没有问题，一切正常
<uni-swipeout2 operate-width="210">
<view slot="content">
<view class="swipe-item2">
<view class="title">猛虫过江</view>
<view class="label">侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年</view>
</view>
</view>
<view slot="button">
<view class="i-swipeout-demo-button-group">
<view class="i-swipeout-demo-button">点赞</view>
<view class="i-swipeout-demo-button">分享</view>
<view class="i-swipeout-demo-button">删除</view>
</view>
</view>
</uni-swipeout2>
slot=content和slot=button中的数据内容无法正常显示，类似数据丢了一样
<block v-for="(item,index) in swipeoutList" :key="index">
<uni-swipeout2 operate-width="185">
<view slot="content">
<view class="swipe-item2">
<view class="title">猛虫过江</view>
<view class="label">{{item.text}}</view>
</view>
</view>
<view slot="button">
<view class="i-swipeout-demo-button-group" style="background:#2db7f5;">
<view class="i-swipeout-demo-button" style="width:60px;border-right:1px solid #fff;">
<uni-icon size="20" type="zan" color="#fff"></uni-icon>
</view>
<view class="i-swipeout-demo-button" style="width:60px;border-right:1px solid #fff;">
<uni-icon size="20" type="share" color="#fff"></uni-icon>
</view>
<view class="i-swipeout-demo-button" style="width:60px;">
<uni-icon size="20" type="remove" color="#fff"></uni-icon>
</view>
</view>
</view>
</uni-swipeout2>
</block>
最新alpha版可以用
1.9正式版后，手动切换编译模式也可以使用，manifest.json -> app-plus -> usingComponents切换编译模式
// manifest.json
{
// …
/* App平台特有配置 /
“app-plus”: {
“usingComponents”:true //是否启用自定义组件模式，为true表示新的自定义组件模式，否则启用老的template模板模式
}
/ 微信小程序特有配置 */
“mp-weixin”: {
“usingComponents”:true //是否启用自定义组件模式，为true表示新的自定义组件模式，否则启用老的template模板模式
}
}
https://ask.dcloud.net.cn/article/35818
升级hx，manifest设为自定义组件编译模式。
如果是cli项目，npm update升级cli。
如果是自定义基座，重新制作自定义基座。
如果是离线打包，重新下载sdk
<view class="u-tabs" :style="{
background: bgColor
}">
<view :id="id">
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
<view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view class=“u-tab-item u-line-1” :id="‘u-tab-’ + index" v-for="(item, index) in list" :key=“index” @tap=“clickTab(index)”
:style="[tabItemStyle(index)]">
<!-- {{ item[name] || item['name']}} -->
<slot :item="item" :count="count" :name="name">
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
{{ item[name] || item['name']}} 00
</slot>
<slot name="titleEx" :item="item" :count="count" :name="name">
11
</slot>
</view>
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
</view>
</scroll-view>
</view>
</view>
<u-tabs :list="tabs" :is-scroll="true" :current="tabIndex" @change="tabChange" active-color="#000000"
inactive-color="#999999" :customStyle="{'background-color':'#050505'}">
<template v-slot:default="{ item, count, name }">
{{item}}, {{count}}, {{name}}
</template>
<view #titleEx="{ item, count, name }">
<view>
<image src="../../static/logo.png"></image>
{{ item[name] || item['name']}} - {{item}}, {{count}}, {{name}}
</view>
</view>
</u-tabs>
结果是
今日订单 0011
已完成 0011
完全没覆盖，，到了一种无法使用的程度
<view class=“item” :class="{‘is-disabled’: !!item.disable}" :style=“item.itemStyle” v-for="(item, j) in child" :key=“j” @click=“handleNodeClick(item, i, j)”>
<text class="item-text">{{item.text}}</text>
<slot name="tag" :data="item"/>
<view class="check" v-if="selected.length > i && item.value == selected[i].value"></view>
</view>
在 uni-app 中使用 v-for 循环渲染带有 slot 的 Vue 自定义组件时，如果发现 slot 中的数据内容无效，通常是因为 slot 作用域的问题。slot 插槽分为默认插槽和作用域插槽两种，而作用域插槽可以传递数据给父组件模板使用。
以下是一个示例，展示如何在 uni-app 中正确使用 v-for 和作用域插槽来渲染带有 slot 的自定义组件，并确保 slot 中的数据内容有效。
1. 自定义组件（MyComponent.vue）
<template>
<view>
<slot :item="item"></slot>
</view>
</template>
<script>
export default {
name: 'MyComponent',
props: {
item: {
type: Object,
required: true
}
}
}
</script>
2. 父组件（ParentComponent.vue）
<template>
<view>
<my-component
v-for="(item, index) in items"
:key="index"
:item="item"
>
<template #default="{ item }">
<view>
<text>{{ item.name }}</text>
<text>{{ item.value }}</text>
</view>
</template>
</my-component>
</view>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
items: [
{ name: 'Item 1', value: 'Value 1' },
{ name: 'Item 2', value: 'Value 2' },
{ name: 'Item 3', value: 'Value 3' }
]
};
}
}
</script>
关键点解析
- 自定义组件：在
MyComponent.vue中，我们定义了一个slot并将其item属性传递给slot。 - 父组件：在
ParentComponent.vue中，我们使用v-for指令循环渲染MyComponent，并通过作用域插槽 (<template #default="{ item }">) 接收MyComponent传递的item数据。 - 作用域插槽：父组件的模板部分使用
#default插槽语法来定义如何渲染MyComponent的内容，并正确访问item对象中的数据。
通过这种方式，我们可以确保在使用 v-for 循环渲染带有 slot 的自定义组件时，slot 中的数据内容是有效的。这个示例展示了如何在 uni-app 中正确地使用作用域插槽来传递数据，并避免数据内容无效的问题。
