list.vue
<template>
<view>
<text>My List</text>
<view v-for="item in sourceList" :key="item.id">
<slot :item="item"></slot>
</view>
</view>
</template>
<script>
export default {
name:"list",
props: ["source"],
watch: {
source(val, oldVal) {
console.log("watch source", val)
this.sourceList = val
}
},
data() {
return {
sourceList: []
};
}
}
</script>
index.vue
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<list :source="dataList">
<template v-slot="{item}">
<!-- 若改动其他文件(如App.vue的样式改动),此处就无法正常显示 -->
{{item.title}}
</template>
</list>
</view>
</template>
<script>
import List from '../../components/list.vue'
export default {
components: {
List
},
data() {
return {
title: 'Hello',
dataList: []
}
},
methods: {
handleItem(item) {
console.log("handle item", item)
}
},
onLoad() {
this.dataList = [
{
id: "1",
title: "title 1",
description: "description 1"
},
{
id: "2",
title: "title 2",
description: "description 2"
}
]
}
}
</script>
示例代码在码云仓库:https://gitee.com/bytrix/my-bug
1 个回复
DCloud_UNI_GSQ
Bug 确认,已加分,后续修复