小程式檔案館——自定義元件
自定義元件的具體建立方法， hello world 示例，請參考智慧小程式官網： ofollow,noindex">smartprogram.baidu.com/docs/develo…
瞭解原理之前，我們來看一下自定義元件中的js構造器：
Component({
properties: {
},
data: {},
attached: function () {},
methods: {}
});
複製程式碼
以上包括了自定義元件的邏輯部分內容，開發者可以在Component構造器的各個生命週期回撥函式中，編寫自己的邏輯程式碼。
在 Component 構造器中寫的自定義元件的原型，執行在小程式的邏輯層(jscore)中，並不與自己的 swan 模板執行在一起-- swan 模板執行在檢視層(webview)中。
所以，setData等操作，都是通過資料通訊，將要設定的資料傳遞到真正的檢視層，然後進行自定義元件的渲染。同理，所有的生命週期，也是當元件的模板在檢視層渲染完畢之後，傳遞迴邏輯層進行觸發的。
所以對於setData的呼叫，也如同頁面的setData一樣，需要謹慎呼叫。因為每一次setData都意味著一次jscore與webview的資料通訊。
類 or 累？
看過自定義元件基本使用方法的同學肯定知道，自定義元件內使用的樣式類是獨立空間，即： 元件模板中使用的css樣式類並不會應用上使用該自定義元件的頁面上的樣式類。
emmmmm，如果上面那句話把你繞暈了，我們來看一下例子：
// page.css
.page-class {
background: #0f0;
height: 100px;
width: 100px;
}
複製程式碼
// page.swan <view> <view class="page-class"></view> <mycomp></mycomp> </view> 複製程式碼
// mycomp.swan <view> <view class="page-class"></view> </view> 複製程式碼
展示效果如下： 
我們可以看到，雖然都是渲染到同一個頁面上，但是頁面上定義的樣式類，在元件中並沒有生效。
那麼同樣的，在元件中定義的類，也不會透出去，影響整個頁面，例：
// page.swan <view> <view class="page-class"></view> <mycomp></mycomp> </view> 複製程式碼
// mycomp.css
.page-class {
background: #0f0;
height: 100px;
width: 100px;
}
複製程式碼
// mycomp.swan <view> <view class="page-class"></view> </view> 複製程式碼
效果如下： 
那麼這個“隔離“是如何做到的呢？ 我們仔細觀察一下自定義元件最後生成的模板，和樣式：
真相大白，原來是自定義元件中使用的樣式類，都被編譯增加了字首。這才使內外的類可以互相隔離。這種設計也有好處也有缺點，好處就不用再想之前用很多框架那樣自己去尋找解決方案(如：CSSinJS或css modules)自定義元件中直接集成了內建解決方案。壞處就是可能有些css上的使用限制，比如（摘自官網）：
這塊也請讀者在開發過程中多注意。
TIPS: 關於css的解決方案，官方貌似還在持續優化，相信不久就可以迎來限制更小的集合了。
元件間的通訊
父子自定義元件之間，可以使用兩種方式進行通訊：
- 利用自定義事件
- 利用dispatch訊息
利用自定義事件
利用自定義事件在父元件中進行事件的繫結，在子元件中進行自定義事件的派發。 例：
// 父元件的swan中 <view> <component-tag-name bindmyevent="onMyEvent" /> </view> 複製程式碼
// 父元件的Component
Component({
methods: {
onMyEvent: function (e) {
console.log('I got message:', e);
}
}
});
複製程式碼
// 子元件的Component
Component({
attached: function () {
this.triggerEvent('myevent', {message: 'you got?'});
}
});
複製程式碼
dispatch訊息
通過 dispatch 方法，元件可以向元件樹的上層派發訊息。訊息將沿著元件樹向上傳遞，直到遇到第一個處理該訊息的元件，則停止。通過 messages 可以宣告元件要處理的訊息。messages 是一個物件，key 是訊息名稱，value 是訊息處理的函式，接收一個包含 target(派發訊息的元件) 和 value(訊息的值) 的引數物件。 (摘自san官網)
如果元件有訊息需要一直向上透傳，則可以使用這個方法，只要沒有元件元件攔截，訊息則會一直向上傳遞。
例：
// 根元件
Component({
messages: {
'childmessage': function (e) {
console.log('childmessage', e);
}
}
});
// 父元件
Component({});
// 子元件
Component({
created() {
this.dispatch('childmessage', {
name: 'swan'
});
}
});
複製程式碼
其中根元件中使用了父元件，父元件中使用了子元件。當子元件呼叫 dispatch 方法時，則會一直傳遞到根元件上（因為父元件並沒有message消費本次dispatch）。
至於父元件想通知子元件嘛，可以通過props的改變，來觸發子元件。
通過上述兩種方式均可以實現父子元件的通訊，當然，各位讀者也可以試試自己引入事件流，或者其他三方庫，來豐富自己的應用通訊方式。 以上～～～～～～～～ 週末啦，祝大家都有個不用加班的週末！