[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)