-
father.vue
<template> <view> <view v-for="(el, ind) in list" :key="ind"> <test-component :list="el"> <template #test="{ sendList }"> <view class="test-item" v-for="(item, index) in sendList" :key="index" hover-class="navigator-hover" @click="handleClick(ind, item)" >{{ item }}</view> </template> </test-component> </view> </view> </template> <script> import testComponent from './testComponent.vue'; export default { data() { return { // 将要组件处理的数据(这里去掉--后用slot渲染出来) list: [ ['A--', 'B--', 'C--'], ['北京--', '上海--'], ['1--', '2--', '3--'] ] } }, components: { testComponent }, methods: { // 点击时总是显示第一条ABC数据,并且ind也总是0 handleClick(ind, item) { console.log(ind) console.log(item) } } } </script> <style> .test-item { line-height: 100rpx; text-align: center; } </style>
-
testComponent.vue
<template> <view> <slot name="test" :send-list="sendList"></slot> </view> </template> <script> export default { props: { list: { type: Array, default: () => [] } }, computed: { sendList() { return this.list.map(item => item.replace(/--/, '')) } } } </script>
- 发布:2020-06-10 15:41
- 更新:2021-07-09 18:41
- 阅读:1916
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win 10
HBuilderX类型: 正式
HBuilderX版本号: 2.7.9
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iphone 8 plus (系统版本13.5)
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
father.vue: page页
testComponent.vue 放入同级目录
从上往下依次点击
father.vue: page页
testComponent.vue 放入同级目录
从上往下依次点击
预期结果:
应该打印:
0 A,0 B,0 C
1 北京,1 上海
2 1,2 2,2 3
应该打印:
0 A,0 B,0 C
1 北京,1 上海
2 1,2 2,2 3
实际结果:
苹果上打印:
0 A,0 B,0 C
0 A,0 B
0 A,0 B,0 C
微信开发者工具:
null A,null B,null C
null 北京,null 上海
null 1,null 2,null 3
内置浏览器:(正确)
0 A,0 B,0 C
1 北京,1 上海
2 1,2 2,2 3
苹果上打印:
0 A,0 B,0 C
0 A,0 B
0 A,0 B,0 C
微信开发者工具:
null A,null B,null C
null 北京,null 上海
null 1,null 2,null 3
内置浏览器:(正确)
0 A,0 B,0 C
1 北京,1 上海
2 1,2 2,2 3
bug描述:
手机运行下:子组件中使用slot,在父组件中循环该子组件,插槽内元素的点击事件中传入的参数总是指向第一个子组件的数据。
且不同平台的打印结果全都不一致
4 个回复
8***@qq.com (作者)
可以来人帮忙看看吗,很着急
DCloud_UNI_FXY
1.App端预计下个Alpha版本修复该问题
2.微信端修复方案
8***@qq.com (作者)
辛苦了
2020-06-12 14:08
DCloud_UNI_GSQ
HBuilderX 2.8.8+ 已修复
1***@163.com
我的hx版本是你们最新的,但是作用域插槽问题还是没有解决!
代码如下:
// 子组件用的是 v-for 中循环的变量 item
// 父组件引用如下
这里还有个问题
Errors compiling template:
18:11:58.059 目前仅支持解构插槽 slotprops,如 v-slot="{ user }"
麻烦看到后回复下,谢谢