uni-app $scopedSlots里有插槽信息，但是取不到

uni-app $scopedSlots里有插槽信息，但是取不到

开发环境 版本号 项目创建方式
Mac 13.0.1 (22A400) CLI

产品分类：uniapp/小程序/微信

示例代码：

<template>  
    <view class="ft-test">  
        <view v-for="(p, index) in protocols" :key="index">  
            <slot name="test-slot" :protocol="p">  
                <text>test-slot-{{ index }}，</text>  
            </slot>  
            第{{ index }}条数据  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    name: 'ft-test',  
    props: {  
        protocols: {  
            type: Array,  
            default: () => []  
        }  
    },  
    data() {  
        return {}  
    },  
    created() {  
        console.log('ft-test-this----', this, this.$slots)  
        console.log('ft-test-$scopedSlots----', this.$scopedSlots)  
    }  
}  
</script>

页面中使用ft-test组件：

<ft-test :protocols="[{title: '步骤1'}, {title: '步骤2'}, {title: '步骤3'}]">  
    <text slot="test-slot" slot-scope="{protocol}">test-slot-{{ protocol.title }}，</text>  
</ft-test>

操作步骤：

在自定义组件中输出：

console.log('ft-test-$scopedSlots----', this.$scopedSlots)

预期结果：

{test-slot: true}

实际结果：

{}

更多关于uni-app $scopedSlots里有插槽信息，但是取不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你是写法有问题吧，看起来在:slot-scope="{protocol}"，这个地方加一个：就能获取了

更多关于uni-app $scopedSlots里有插槽信息，但是取不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在处理 uni-app 中的 $scopedSlots 时，如果遇到了插槽信息存在但无法获取的问题，通常是由于作用域插槽的使用方式不正确或访问方式有误。以下是一个完整的代码示例，展示如何在 uni-app 中正确使用和访问 $scopedSlots。

父组件

首先，我们创建一个父组件，其中定义了一个作用域插槽，并传递一些数据给子组件：

<template>
  <view>
    <child-component>
      <template v-slot:default="slotProps">
        <text>{{ slotProps.message }}</text>
      </template>
    </child-component>
  </view>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

子组件

接下来，我们创建子组件，并在其中定义 $scopedSlots 的使用：

<template>
  <view>
    <!-- 使用插槽 -->
    <slot :message="message"></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child Component!'
    };
  },
  mounted() {
    // 尝试打印 $scopedSlots，但通常不直接在组件内使用它
    console.log(this.$scopedSlots); // 仅用于调试，实际开发中不常用
  }
}
</script>

注意事项

  1. 插槽定义与传递：在子组件中，我们通过 <slot :message="message"></slot> 定义了一个名为 message 的插槽属性。在父组件中，通过 slotProps 访问这个属性。

  2. $scopedSlots 的使用：虽然 this.$scopedSlots 在子组件中存在，但通常不直接在组件逻辑中使用。它主要用于框架内部处理插槽的渲染。开发者应主要通过模板中的 <slot> 标签和父组件中的 <template v-slot:name="props"> 来处理作用域插槽。

  3. 调试与验证：在子组件的 mounted 钩子中打印 this.$scopedSlots 可以帮助理解插槽的结构，但这不是标准的开发实践。

如果以上代码结构正确，并且你仍然无法获取插槽信息，请检查以下几点：

  • 确保父组件正确使用了 v-slot 语法。
  • 确保子组件正确地将数据作为插槽的属性传递。
  • 检查是否有任何拼写错误或语法错误。
  • 确认 uni-app 和相关依赖的版本是否支持当前使用的特性。

通过上述代码示例和注意事项，你应该能够解决 $scopedSlots 里存在但取不到插槽信息的问题。

回到顶部