【uniapp】解决编译成微信小程序时，自定义组件会多一级父级节点

1. 背景

uniapp 中的自定义组件，DOM节点如下

<div class="father">
	<div class="son"></div>
</div>

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

<div class="father">
	<div class="多出来的节点">
		<div class="son"></div>
	</div>
</div>

2. 原因

从官方文档了解到

3. 解决方法

在 自定义组件 中加入如下 options 属性，特别是第四个属性，会使其更接近 vue组件 的表现 参考文档

export default {
  props: ['data'],
  data(){ return { } },
  options: {
    // 微信小程序中 options 选项
    multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
    styleIsolation: "isolated",  //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
    addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
    virtualHost: true,  //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
}

加完如上属性后，编译出来的多余节点便不会出现