初入小程式 | 文件使用 | 注意彙總 - 自定義元件

zyw5791557發表於2018-07-20
元件

略略略

建立自定義元件

自定義元件類似頁面，需要有 js wxss wxml json 四個檔案。
首先在 json 宣告這是一個自定義元件：

{
    "component": true
}
複製程式碼

程式碼示例：

<!-- 自定義元件內部的 wxml 結構 -->
<view class="inner">
    {{ innerText }}
</view>
<slot></slot>
複製程式碼
/* 自定義元件內部樣式 */
.inner {
    color: red
}
複製程式碼

注意：自定義元件內部樣式不能夠使用 ID 選擇器，屬性和標籤名選擇器。

程式碼示例：

Component({
    properties: {
        // props
        innerText: {
            type: String,
            value: 'defult'
        }
    },
    data: {
        // 一些自定義元件內部狀態
        someData: {}
    },
    methods: {
        // 一些自定義元件的方法
        customMethod: function () {}
    }
})
複製程式碼

注意：自定義元件要用 Component 來註冊元件。

在 Page 應用的時候需要配置 page.json 檔案

{
    "usingComponents": {
        "component-tag-name": "xxx/xxx"
    }
}
複製程式碼

然後直接在 page.wxml 引用

<view>
    <component-tag-name inner-text="some text"></component-tag-name>
</view>
複製程式碼

元件模板和樣式

slot

<!-- 元件模板 -->
<view>
    <view>這是元件內的文字</view>
    <slot></slot>
</view>
複製程式碼
<!-- 元件引用 -->
<view>
    <component-tag-name>
        <!-- 外部插入到元件內部 -->
        <view>我是元件外部傳進去的文字</view>
    </component-tag-name>
</view>
複製程式碼

開啟多個 slot 支援

Component({
    options: {
        multipleSlots: true  // 在元件內定義支援多 slot
    }
})
複製程式碼
<view>
    <slot name="before"></slot>
    <view>略略略</view>
    <slot name="after"></slot>
</view>
複製程式碼
<view>
    <component-tag-name>
        <!-- 這部分將插入 slot name="before" -->
        <view slot="before">我在前面</view>
        <!-- 這部分將插入 slot name="after" -->
        <view slot="after">我在後面</view>
    </component-tag-name>
</view>
複製程式碼

知識點： :host 選擇器 將對該元件所在節點的預設樣式

外部樣式類

Component({
    externalClasses:['my-class']
})
複製程式碼
<component-tag-name class="my-class">這段文字的顏色由元件外的樣式所決定</component-tag-name>
複製程式碼

Component 構造器

注意：

  • this.data 可以訪問內部狀態，但是不要直接修改他們，請使用 this.setData()
  • 生命週期函式無法直接通過 this 訪問到
  • 屬性名避免 data 開頭，否則會被解析為 dataset
  • 在一個元件的定義和使用時，屬性和 data 互不衝突

元件間的通訊

  • 父元件向子元件傳遞資料
  • 子元件傳送事件並傳遞資料到父元件
  • 父元件呼叫子元件內部的方法 this.selectComponent

監聽事件

當元件內部 myevent觸發的時候, 呼叫 onMyEvent 方法。

<component-tag-name bind:myevent="onMyEvent"></component-tag-name>
複製程式碼

觸發事件

<!-- 在自定義元件中 -->
<button bindtap="onTap">點選這個按鈕將觸發“myevent”事件</button>
複製程式碼
Component({
    properties: {}
    methods: {
        onTap: function(){
            var myEventDetail = {} // detail物件，提供給事件監聽函式
            var myEventOption = {} // 觸發事件的選項
            this.triggerEvent('myevent', myEventDetail, myEventOption)
        }
    }
})
複製程式碼

behaviors

類似於 vue 中的 mixin ,用法也一樣 詳見

相關文章