uni-app 作用域插槽封装list组件 改动文件会导致插槽内的数据显示异常

uni-app 作用域插槽封装list组件 改动文件会导致插槽内的数据显示异常

开发环境 版本号 项目创建方式
Mac 11.6 HBuilderX 
产品分类：uniapp/小程序/微信

### 示例代码：

#### list.vue
```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}">  
                {{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;  
    }  
</style>

预期结果：

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

实际结果：

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

bug描述：

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


更多关于uni-app 作用域插槽封装list组件 改动文件会导致插槽内的数据显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

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

更多关于uni-app 作用域插槽封装list组件 改动文件会导致插槽内的数据显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于uni-app框架在热重载时的作用域插槽处理机制导致的。当修改其他文件触发热更新时，作用域插槽的数据绑定可能会丢失。

解决方案：

  1. 优化list组件的props处理：
<script>
export default {
  name: "list",
  props: {
    source: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      sourceList: []
    };
  },
  watch: {
    source: {
      immediate: true,
      handler(val) {
        this.sourceList = val || [];
      }
    }
  },
  created() {
    this.sourceList = this.source || [];
  }
};
</script>
  1. 使用computed替代watch（推荐）：
<script>
export default {
  name: "list",
  props: {
    source: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    sourceList() {
      return this.source || [];
    }
  }
};
</script>
  1. 确保插槽内容稳定渲染： 在index.vue中，可以添加v-if确保数据存在时才渲染：
<list v-if="dataList.length" :source="dataList">
  <template v-slot="{item}">
    {{item.title}}
  </template>
</list>
回到顶部