自定义组件这个“普通”节点不普通！
发布于 4 年前 作者 mengyan 4950 次浏览 来自 分享

文档中对于自定义组件节点的描述只在这里看到一些，如下图


在没有任何外部css属性作用的情况下，这个"普通节点"是一个行盒

实际情况下，由于内部外层节点可能是多种盒模型情况，那么这个普通节点的实际效果会是如何呢？(忽然间忘记了行盒父元素包裹块级子元素的效果了，还是我没这么做过？)
下面来测试下这个"普通"节点在内部不同盒模型情况下的实际效果

  1. 当内部是文本节点的时候
  <!--components/custom-componet.wxml-->
  <text>我是文本节点</text>

页面效果

  1. 当内部是块级元素节点时候
<!--components/custom-componet.wxml-->
<view>我是块级元素</view>

页面效果

  1. 当内部是行块盒元素节点时候
<!--components/custom-componet.wxml-->
<view style="display:inline-block;
             width:200px;
             height:30px;
             line-height:30px;
             border:1px solid red">
      我是行块盒元素
</view>

页面效果

小结: 内部不同的盒模型反馈到外部这个自定义组件节点的时候，这个"普通"节点的表现效果基本符合内部元素要实现的效果。这可能是官方把这个普通节点定义为inline的初衷吧。
但是有些时候，内部节点可能需要一些外部节点的信息来配合自己的效果。比如width:“50%”;height:“30%” 等等…那么这时候要如何写自定义组件呢？

  1. 下面测试内部width和height 百分比的情况

先把外部page和页面，包括自定义组件外层元素的height设置为100%;

再设置自定义组件内部元素如下

<!--components/custom-componet.wxml-->
<view
  style="width:70%;
         height:30%;
         text-align:center;
         color:red;">
  我是块盒，我的宽高随父级改变
</view>

内部节点页面效果

自定义节点页面效果

我们把自定义组件所在页面的父级组件 宽度和高度设置改变

  <!--index.wxml-->
  <view style="width:200px;height:300px;">
    <custom-component />
  </view>

内部节点页面效果

自定义节点页面效果

小结 不改变自定义组件inline模型的情况下,内部节点的width和height百分比是对应的自定义组件节点的父级节点。自定义组件的宽高来自内部元素大小(小程序没有margin的视图效果(就是你看感觉不到margin),但是认margin效果真实存在,有时候不小心反应不过来会怀疑人生,这里的内部元素因为是块盒会有自动margin撑满)

之所以写这些废话，就是在写自定义组件的时候，为了考虑多种情况(比如组件可能作为块盒使用也可能作为行盒还可能是定位元素等等),此时这个官方所谓的"普通"节点会使我蒙逼，可能是我道行不深吧。看到官方也给出了通过虚拟节点把这个节点干掉的方案，但是也暴漏了更多问题(比如https://developers.weixin.qq.com/community/develop/doc/0006c44dcb47604d0e8b6147051400)。慢慢总结吧。这里只做个提醒、抛砖引玉，受益的小伙伴给点个赞，没人点赞都不爱写总结了！！

回到顶部