详细问题描述
在小程序、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创建
[编译模式是老模板模式还是新的自定义组件模式?]
1 个回复
Chandre (作者)
沙发自己坐了