Chandre
Chandre
  • 发布:2019-06-21 22:35
  • 更新:2019-06-24 16:45
  • 阅读:2016

【报Bug】在小程序、APP中, 在v-slot下使用组件嵌套时,组件的$parent指向错误

分类:uni-app

详细问题描述

在小程序、APP中, 在v-slot下使用组件嵌套时,所有的组件的$parent都会统一指向自动生成的抽象组件(generic:scoped-slots-**)

可重现代码片段

my_a.vue

<template>  
    <view class="View">  
        <text>My-a</text>  
        <view v-for="(item,i) in list" :key="i">  
            <slot :item="item" />  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        props: {  
            list: Array  
        },  
        mounted() {  
            console.log("My-A", this._uid, this)  
        }  
    }  
</script>  
<style scoped>  
    .View {  
        border: 1px solid #007AFF;  
        padding: 5px;  
    }  
</style>

my_b.vue

<template>  
    <view class="View">  
        <text>My-b</text>  
        <slot></slot>  
    </view>  
</template>  

<script>  
    export default {  
        mounted() {  
            console.log("My-B", this._uid, this)  
        }  
    }  
</script>  

<style scoped>  
    .View {  
        border: 1px solid red;  
        padding: 5px;  
    }  
</style>

my_c.vue

<template>  
    <view class="View"><slot /></view>  
</template>  

<script>  
    export default {  
        mounted() {  
            console.log("My-C", this._uid, this)  
        }  
    }  
</script>  

<style scoped>  
    .View {  
        border: 1px solid green;  
        padding: 5px;  
    }  
</style>

index.vue

<template>  
    <view>  
        <my-a :list="list" v-slot="{ item }">  
            <my-b>  
                <my-c>{{ item.name }}</my-c>  
            </my-b>  
        </my-a>  
    </view>  
</template>  

<script>  
    import MyA from "@/components/my_a";  
    import MyB from "@/components/my_b";  
    import MyC from "@/components/my_c";  

    export default {  
        components: {  
            'my-a': MyA,  
            'my-b': MyB,  
            'my-c': MyC,  
        },   
        data() {  
            return {  
                list: [  
                    {name: 'aaaa'},  
                    {name: 'bbbb'},  
                    {name: 'cccc'}  
                ]  
            }  
        }  
    }  
</script>  

<style>  
</style>  

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号] 2.0.1.20190614

[mac版本号] 10.14.5

uni-app运行环境说明

[运行端是h5或app或某个小程序?] app、微信小程序

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试] HBuilderX创建

[编译模式是老模板模式还是新的自定义组件模式?]

2019-06-21 22:35 负责人:无 分享
已邀请:
Chandre

Chandre (作者)

沙发自己坐了

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