uni-app 小程序中作用域插槽在特定情况下无法正常显示插槽内容

uni-app 小程序中作用域插槽在特定情况下无法正常显示插槽内容

开发环境 版本号 项目创建方式
Mac

产品分类:HbuilderX


操作步骤:

一开始正常,此时页面不动,修改组件代码(如随意加一个空格或回车),重新编译后,页面中作用域插槽将无法显示。此时再修改一下页面代码(如随意加一个空格或回车),又可恢复正常显示,如此,再修改组件代码,又会不显示。

预期结果:

插槽内容正常显示。

实际结果:

插槽内容无法正常显示。

bug描述:

页面中使用具有作用域插槽的组件,一开始正常,此时页面不动,修改组件代码(如随意加一个空格或回车),重新编译后,页面中作用域插槽将无法显示。此时再修改一下页面代码(如随意加一个空格或回车),又可恢复正常显示,如此,再修改组件代码,又会不显示。对比了两种状态下微信开发者工具中生成的代码,发现不显示的时候生成的页面.json文件中没有作用域插槽信息,见附件

  1. 定义组件
<template>  
    <view>  
        <slot name="left" :entity="leftData"></slot>  
        <slot name="right" :entity="rightData"></slot>  
    </view>  
</template>  

<script>  
    export default {  

        name: 'bugTest',  
        data() {  
            return{  
                leftData: {  
                    name: 'zhangsan',  
                },  
                rightData: {  
                    name: 'lisi'  
                }  
            }  
        }  
    }  
</script>  

<style>  
</style>  
  1. 页面中使用组件
<template>  
    <view style="padding: 0 10rpx;">  
        <bug-test>  
            <template slot-scope="{ entity }" slot="left">  
                <view style="background-color: red;width:200rpx;height: 40rpx;">{{entity.name}}</view>  
            </template>  
            <template slot-scope="{ entity }" slot="right">  
                <view style="background-color: green;width:200rpx;height: 40rpx;">{{entity.name}}</view>   
            </template>  
        </bug-test>  
    </view>  
</template>  
<script>  
    import bugTest from '@/components/public/bug-test.vue'  
    export default {  
        components: {  
            bugTest  
        },  
        data() {  
            return {}  
        }  
    }  
</script>  
<style>  
</style>  

更多关于uni-app 小程序中作用域插槽在特定情况下无法正常显示插槽内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也遇到这个问题了,不知道是不是确定就是bug,大佬和官方给看看呗

更多关于uni-app 小程序中作用域插槽在特定情况下无法正常显示插槽内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


折磨了一天,我一开始还怀疑是组件的问题。。后来才逐渐发现规律。

回到顶部