注册登录

maplemei92

发布：2022-09-30 18:16
更新：2023-06-19 10:08
阅读：312

【报Bug】template v-slot:xxx this.slots 无结果

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 2.5.1 (21G83)

HBuilderX类型：正式

HBuilderX版本号： 3.6.3

浏览器平台： Chrome

浏览器版本： 104.0.5112.79（正式版本） (x86_64)

项目创建方式： HBuilderX

操作步骤：

父组件

<children>  
    <template v-slot:option="{ option }">  
         {{ option }}  
    </template>  
</children>

子组件 children.vue

<view>  
        <slot name="option" :option="{}"></slot>  
</view>  

mounted() {  
    // 这里 没有对应的 option  
    console.log(this.$slots);  
}

预期结果：

this.$slots.option有值

实际结果：

this.$slots.option无值

bug描述：

父组件

<children>  
    <template v-slot:option="{ option }">  
         {{ option }}  
    </template>  
</children>

子组件 children.vue

<view>  
        <slot name="option" :option="{}"></slot>  
</view>  

mounted() {  
    // 这里 没有对应的 option  
    console.log(this.$slots);  
}

如果不写

<children>  
    <template v-slot:option="">  
         xxx  
    </template>  
</children>

则有对应的数据

2022-09-30 18:16 负责人:无分享

2 个回复

野猪佩琦

+1 ！！！！
template 中只写插槽名就可以在组件 $slos 中看到这个插槽名。如果写了有入参（v-slot:name="{myData}"）的话，组件就捕获不到

<children>    
    <template v-slot:option="">    
         xxx    
    </template>    
</children>

还有个问题，如果这样写，小程序代码会多一层view标签

<children>  
   <view>xxxx<view>  
</children>

要回复问题请先登录或注册