1***@qq.com
1***@qq.com
  • 发布:2024-01-03 16:49
  • 更新:2024-01-18 10:35
  • 阅读:595

vue3小程序插槽中使用 <template>会多一个view?

分类:uni-app

父页面:

<template>  
    <view class="content">  
        <aaaaa>  
            <template v-slot:default>111111111</template>  
        </aaaaa>  
    </view>  
</template>

aaaaa组件:

<template>  
    <view class="aaaaaa">  
        <slot name="default"></slot>  
    </view>  
</template>  

<script>  
    export default {  
        options: {  
            styleIsolation: 'shared',  
            virtualHost: true,  
        },  
        externalClasses: ['class'],  
        data() {  
            return { }  
        },  
        onLoad() { },  
        methods: { },  
    }  
</script>

h5生成结果:

<view class="content">  
        <view class="aaaaaa">111111111</view>  
</view>  

微信小程序生成结果(111111外面多了一层<view>):

<view class="content">  
        <view class="aaaaaa">  
            <view>111111111</view>  
        </view>  
</view>  

在组件中使用<template>会在小程序中多生成一个div,问下这个怎么解决?

测试结果:
插槽不能传值,且插槽内容必须且只能有一个根节点,否则就会多一层view

多一层view的情况

<template v-slot:default="{ data }">    //插槽传值  
        <view class="b">111111111</view>  
 </template>  

<template v-slot:default>    //内容多根节点  
        <view class="a">111111111</view>  
        <view class="b">111111111</view>  
 </template>  

<template v-slot:default>11111111</template>        //没有根节点 

正常情况:

<template v-slot:default>  
        <view class="a">111111111</view>  
 </template>
2024-01-03 16:49 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

小程序平台强制在 slot 上使用 view 进行包装,你目前可以参考 https://github.com/dcloudio/uni-app/issues/4629 进行兼容

西恩十月

西恩十月

小程序是这样的,具体你可以研究一下 virtualHost 概念,virtualHost:true,可以 把自定义节点设置成虚拟的,更加接近Vue组件的表现,可以去掉微信小程序自定义组件多出的最外层标签

  • 1***@qq.com (作者)

    已经是virtualHost:true了。你没明白我的意思,我是想表达小程序里面class="aaaaaa"这个view里面还多了一层<view>,而h5是没有的


    h5


    <view class="content">    
    <view class="aaaaaa">111111111</view>
    </view>

    小程序加virtualHost:


    <view class="content">    
    <view class="aaaaaa">
    <view>111111111</view>
    </view>
    </view>

    小程序不加virtualHost


    <view class="content">    
    <aaaaa>
    <view class="aaaaaa">
    <view>111111111</view>
    </view>
    </aaaaa>
    </view>

    2024-01-04 09:16

要回复问题请先登录注册