官方文件戳這裡：文件

一、單個與多個slot的使用方法

1.單個使用

<!-- 元件模板 -->
<view class="wrapper">
  <view>這裡是元件的內部節點</view>
  <slot></slot>
</view>

<!-- 引用元件的頁面模版 -->
<view>
  <component-tag-name>
    <!-- 這部分內容將被放置在元件 <slot> 的位置上 -->
    <view
 
>這裡是插入到元件slot中的內容</view>
  </component-tag-name>
</view>

2.多個使用

slot預設使用單個，若要使用多個，要先宣告：

//Component.js
Component({
  options: {
    multipleSlots: true // 在元件定義時的選項中啟用多slot支援
  }
})

使用name屬性來區分slot

<!-- 元件模板 -->
<view class="wrapper">
  <slot name="before"
 
></slot>
  <view>這裡是元件的內部細節</view>
  <slot name="after"></slot>
</view>

引用頁面用slot屬性來選擇要注入的slot

<!-- 引用元件的頁面模版 -->
<view>
  <component-tag-name>
    <!-- 這部分內容將被放置在元件 <slot name="before"> 的位置上 -->
    <view slot="before">這裡是插入到元件slot name="before"中的內容</view
 
>
    <!-- 這部分內容將被放置在元件 <slot name="after"> 的位置上 -->
    <view slot="after">這裡是插入到元件slot name="after"中的內容</view>
  </component-tag-name>
</view>

筆記：

• 頁面模板view裡面的內容會直接替換元件slot標籤裡的內容，而不是疊加。
• 一般是用於非元件邏輯的程式碼塊的注入，不用於資料注入。

二、元件樣式

1.不能使用的選擇器

#a { } /* 在元件中不能使用 */
[a] { } /* 在元件中不能使用 */
button { } /* 在元件中不能使用 */
.a > .b { } /* 除非 .a 是 view 元件節點，否則不一定會生效 */

2.：host指定元件預設樣式

/* 元件 custom-component.wxss */
:host {
  color: yellow;
}

筆記:

• 使用不被允許的選擇器會報錯哦。
• 元件內的樣式完全獨立，不繼承全域性樣式（app.wxss）以及頁面樣式。所以有用到字型圖示需要重新引用。

三、屬性、資料、方法構造器

1.元件通用屬性與方法

通用屬性

通用方法

setData

/* setData */
this.setData({
  //需要設定的data
});

hasBehavior

/* hasBehavior */
//檢查元件是否具有 behavior （檢查時會遞迴檢查被直接或間接引入的所有behavior）

triggerEvent

//引數依次為事件名、引數、選項值
this.triggerEvent(action,{},{});
//funName 為元件的觸發動作名字，在頁面裡這樣繫結
<component-tag-name bind:action="fun"></component-tag-name>

createSelectorQuery

//大致寫法
var query = this.createSelectotQuery();
query.("#id||.class").scrollOffset(function(res){
     //獲取到的節點資訊
});

query有關的文件戳這：文件

selectComponent&selectAllComponents

//使用選擇器選擇元件例項節點，返回匹配到的第一個元件例項物件
//使用選擇器選擇元件例項節點，返回匹配到的全部元件例項物件組成的陣列

getRelationNodes

//獲取所有這個關係對應的所有關聯節點(父節點、子節點)

構造器

Component({

  behaviors: [],

  properties: {
    //通常用於接受頁面出傳過來的值，頁面如下
    //<component-tag-name myProperty:"aaa"></component-tag-name>
    //可用setData改變值
    myProperty: { 
      type: String, // 型別（必填），目前接受的型別包括：String, Number, Boolean, Object, Array, null（表示任意型別）
      value: '', // 屬性初始值（可選），如果未指定則會根據型別選擇一個
      observer: function(newVal, oldVal){} // 屬性被改變時執行的函式（可選），也可以寫成在methods段中定義的方法名字串, 如：'_propertyChange'
    },
    myProperty2: String // 簡化的定義方式
  },
  data: {}, // 私有資料，可用於模版渲染
  // 生命週期函式，可以為函式，或一個在methods段中定義的方法名
  attached: function(){
  //元件生命週期函式，在元件例項進入頁面節點樹時執行
  },
  moved: function(){
  // 元件生命週期函式，在元件例項被移動到節點樹另一個位置時執行
  },
  detached: function(){
  //元件生命週期函式，在元件例項被從頁面節點樹移除時執行
  },

  methods: {
    //元件的自定義方法寫在這裡
    onMyButtonTap: function(){
      this.setData({
      })
    }
  }

})