w***@126.com
w***@126.com
  • 发布:2021-09-29 22:11
  • 更新:2021-10-08 20:59
  • 阅读:550

【报Bug】作用域插槽封装list组件,改动文件会导致插槽内的数据显示异常

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.6

HBuilderX类型: 正式

HBuilderX版本号: 3.2.9

第三方开发者工具版本号: Stable 1.05.2108140

基础库版本号: 2.20.0

项目创建方式: HBuilderX

示例代码:

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

操作步骤:
<script>  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
    page {  
        background-color: #eee;  
        /* 比如在App.vue页改一下背景色,index.vue中的作用域插槽数据显示异常 */  
    }  
</style>

预期结果:

无论改动哪个页面,作用域插槽中的数据都应该正常显示

实际结果:

作用域插槽中的数据会因为其他页面的改动导致显示异常

bug描述:

若改动其他文件(如App.vue的样式改动),作用域插槽内的数据就无法正常显示
示例代码在码云仓库:https://gitee.com/bytrix/my-bug

2021-09-29 22:11 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

Bug 确认,已加分,后续修复

该问题目前已经被锁定, 无法添加新回复