[TOC] # view 与 block 两者的区别是，`<view>` 是一个组件，会在页面上做渲染；`<block>`不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。下面是两个`<block>` 使用的例子： `wx:if` ``` <block wx:if="{{true}}"> <view> text </view> <view> text </view> </block> ``` `wx:for` ``` <block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block> ``` `wx:elif` 和 `wx:else` ``` <block wx:if="{{boolean==true}}"> <view class="bg_black"></view> </block> <block wx:elif="{{boolean==false}}"> <view class="bg_red"></view> </block> <block wx:else> <view class="bg_red"></view> </block> ``` # 小程序-[创建组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/) 小程序创建组件，一个组件由4个文件组成，和创建页面类似。包含：`json、wxml、wxss、js`文件。 卡槽 均用 `<slot></slot>` `properties` 相当于是 vue 的 `props`，通过该属性，外界向组件内传入数据。组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， `type` 表示属性类型、 `value` 表示属性初始值、 `observer` 表示属性值被更改时的响应函数 `data` 组件的内部数据，和`properties`一同用于组件的模版渲染。也就是说，通过 `this.data` 可以同时获得 `data` 和 `properties` `behaviors` 类似于mixins和traits的组件间代码复用机制，参见[`behaviors`](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html) `relations` 否组件间关系定义，参见[`组件间关系`](https://cloud.tencent.com/developer/article/1029113) [微信小程序 发现之旅（三）—— 组件之间的参数传递](https://www.cnblogs.com/wisewrong/p/9110687.html) # 子组件 ## 页面编译的子组件代码渲染截图：  上图红框部分就是小程序子组件编译后的页面，子组件引入的标签不会被拆解，里面还会自动生成一个叫做“`#shadow-root`”的层，用于隔绝父组件的元素 `class类` 和子组件的元素 `class类`，所以同一个类样式在子组件的使用，都需要重新在子组件中定义样式，这时候缺点就暴露了，很多我们定义的共用样式类在这种渲染模式下是无法使用的，遗憾有之~。如果复杂组件又引用超级多共用样式的，就会造成很多css的代码冗余。但是……,塞翁失马焉知非福！用着用着就发现了一大好处，这种隔离，对于弹框等就算组件复杂，父子组件业务偶尔比较低的情况，开发子组件非常有利，比如：多个弹框，弹框嵌弹框也可以直接写在子组件，因为`#shadow-root` 会自行做隔离。另：子组件内的标签(`a`,`button`,`li`等)样式是可以复用公共定义，无需重写 # 影子节点ShadowDOM https://juejin.im/post/59f2ef2d6fb9a045076ee831 # 参考 [微信小程序組件封裝](https://hk.saowen.com/a/aaa7c8df80e5d76e8fb77a153c9ed29e1e07cfefb907748de4b0cacea1cc3634)