uni-app 组件插槽Slot在父页面使用data结构变量无法显示

uni-app 组件插槽Slot在父页面使用data结构变量无法显示

开发环境 版本号 项目创建方式
Windows Win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Win10

HBuilderX类型：正式

HBuilderX版本号：3.2.16

手机系统：Android

手机系统版本号：Android 12

手机厂商：华为

手机机型：ALL

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<demo>  
    <template v-slot:default="{val}">
        {{title}}
    </template>
</demo>
<demo>
    <template v-slot:default="{val}">
        {{val}}
    </template>
</demo>

<script>
import demo from '../../components/demo.vue'
export default {
data() {
return {
title: 'Hello Word'
}
},
components:{
demo
}
}
</script>

操作步骤：

使用组件插槽，父组件嵌入子节点

预期结果：

正常使用变量

实际结果：

Vu3无法渲染显示空白,Vu2变量undefined

bug描述：

组件插槽父页面嵌入子节点无法使用data结构里变量数据，只要使用就不会渲染，Vue3显示空白,Vue2显示undefined


更多关于uni-app 组件插槽Slot在父页面使用data结构变量无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

同问同问

更多关于uni-app 组件插槽Slot在父页面使用data结构变量无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bug多没人管

在uni-app中使用组件插槽时，父页面data变量无法显示的问题通常与作用域插槽的变量传递有关。根据你的代码，问题出在作用域插槽的变量绑定上。

问题分析：

  1. 子组件demo需要正确暴露作用域插槽变量
  2. 父组件中{{title}}的访问方式需要调整

解决方案：

子组件(demo.vue)需要正确暴露变量：

<!-- demo.vue -->
<template>
  <view>
    <slot :val="childData"></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      childData: '来自子组件的数据'
    }
  }
}
</script>

父组件使用方式：

<!-- 父组件 -->
<demo>
  <!-- 方式1：访问父组件data变量 -->
  <template v-slot:default="{val}">
    {{title}} <!-- 这里可以直接访问父组件的title -->
    {{val}}   <!-- 这里访问子组件传递的val -->
  </template>
</demo>

<!-- 方式2：如果只需要显示父组件变量 -->
<demo>
  {{title}} <!-- 直接使用插槽内容 -->
</demo>
回到顶部