如何解决uniapp编译成微信小程序时，自定义组件会多一级父级节点介绍最近开发uniapp，编译成微信小程序的时候，发

介绍

最近开发uniapp，编译成微信小程序的时候，发现了这个问题。我自己自定义组件居然会多了一层父级节点。当时都惊呆了，一开始以为是自己组件的问题，经过一番寻找测试，自己最后也是成功解决了，解决方式如下。

有一个页面需要以卡片的形式展示数据，我抽离成了一个组件, 这个组件名字叫 nft-card。代码结构大概如下。

<view class="nft_card_container">
    <!-- 封面 -->
    <view class="cover"></view>
    <!-- 信息 -->
    <view class="info"></view>
</view>

在页面使用下

<nft-card v-for="item in neftList" :key="item.id" :item="item" ></nft-card>

查看一下展示的效果

很好🎉🎉

查看一下节点，编译成uniapp之后节点如下

和自己书写的节点保持一致，很好🥳🥳！

编译成微信小程序查看👀一下

🥶🥶

编译成微信小程序之后节点如下

可以看到多了一层节点，这个节点居然是我自定义的组件的名字！

因为我定义的时候把这个组件的宽度设置为width: 48%, 无缘无辜来了这一层，就导致了宽度的丢失。第一反应是给这个多了的父级节点添加上一个宽度属性，证明是可以的，但是并没有从根源解决问题。找了一下官方文档，确实有。

需要加上一个options

最关键的就是最后一个属性

加上之后，编译成微信小程序查看👀一下，果然就正常了