uni-app 小程序：循环的插槽中不允许访问页面数据

uni-app 小程序：循环的插槽中不允许访问页面数据

示例代码：

<template lang="pug">  
view  
  view 外面的  
  view(v-for="(item, index) in list" :key="index")  
    slot(v-bind:item="item")  
</template>  

<script>  
export default {  
  name: 'inner',  
  props: {  
    list: {  
      type: Array,  
      default() {  
        return []  
      }  
    }  
  }  
}  
</script>

<template lang="pug">  
view  
  view {{obj.name}}  
  inner(:list="list" v-slot='{ item }')  
    view {{obj.name}}  
    view {{item}}  
</template>  

<script>  
import inner from './inner.vue'  
export default {  
  components: { inner },  
  data() {  
    return {  
      obj: {  
        name: 'hello'  
      },  
      list: [1,2,3,4,5]  
    }  
  },  
}  
</script>

操作步骤：

  1. 创建一个组件，暴露一个循环插槽
  2. 页面中引入此组件
  3. 在组件插槽中访问页面数据、方法、过滤器，会发现无效

预期结果：

循环插槽中能够正常访问页面数据、方法、过滤器等

实际结果：

循环插槽中未能正常访问页面数据、方法、过滤器等

bug描述：

循环的插槽中不允许访问页面数据、方法、过滤器。

什么意思呢，比如有一个页面A，引入了一个组件B，B中有一个循环出来的插槽，A中使用组件B，在A中定义的数据是无法直接在插槽中使用的。

详细问题我写了一篇文章，请参看：https://www.yuque.com/xiaoyulive/uniapp/gw1o5v

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 windows10
第三方工具版本 1.05.2105170
基础库版本 2.16.1
项目创建方式 CLI
CLI版本 4.5.12

更多关于uni-app 小程序：循环的插槽中不允许访问页面数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 小程序：循环的插槽中不允许访问页面数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 小程序端限制问题。在循环插槽（v-for + slot）中，插槽内容的作用域会被限制在循环组件内部，无法直接访问父页面的数据和方法。

问题原因： 小程序原生架构中，模板渲染和数据绑定机制与 Vue 存在差异。当使用循环插槽时，uni-app 需要将插槽内容编译为独立的小程序模板，此时插槽内容的作用域会被隔离，导致无法访问父级页面的数据。

解决方案：

  1. 通过 props 传递数据 将需要访问的页面数据通过组件的 props 传递给插槽：
<!-- 父组件 -->
<inner :list="list" :obj="obj" v-slot='{ item }'>
  <view>{{obj.name}}</view>
  <view>{{item}}</view>
</inner>

<!-- inner 组件 -->
<view v-for="(item, index) in list" :key="index">
  <slot v-bind:item="item" v-bind:obj="obj"></slot>
</view>

<script>
export default {
  props: {
    list: Array,
    obj: Object
  }
}
</script>
  1. 使用作用域插槽参数 如果只需要访问循环项数据，确保所有需要的数据都通过插槽 prop 传递：
<!-- inner 组件 -->
<slot v-bind:item="item" v-bind:index="index"></slot>
回到顶部