組件的定義

• 要編寫一個(gè)自定義組件，首先需要在json文件中進(jìn)行自定義組件聲明（將 component 字段設(shè)為true ）。
• 使用用已注冊(cè)的自定義組件前，首先要在頁(yè)面的json文件中進(jìn)行引用聲明。此時(shí)需要提供每個(gè)自定義組件的標(biāo)簽名和對(duì)應(yīng)的自定義組件文件路徑（標(biāo)簽名稱只能是小寫字母、中劃線和下劃線的組合，組件根目錄名不能以“wx-”為前綴）。

//自定義組件component.json
{
  "component": true
}
 
//引用自定義組件的頁(yè)面 page.json
{
  "usingComponents": {
    "component-tag-name": "../component/component"
  }
}

<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu)(component.wxml)-->
<view class='wapper'>
  <text>this is component</text>
  <slot name="slot1"></slot>
  我在中間
  <slot name="slot2"></slot>
</view>
 
<!-- 以下是對(duì)一個(gè)自定義組件的引用 (page.wxml)-->
<view>
  <text>This is Page</text>
  <component-tag-name inner-text="Some text" class="page-component">
    <view slot="slot1" class="slot">來(lái)自page頁(yè)面，通過(guò)slot標(biāo)簽</view>
    <view slot="slot2"></view>
  </component-tag-name>
</view>

• wxss文件
  
  

  //component.wxss .wapper{ background-color:#ccc; width: 100%; height:auto; } .slot{ color:red; } //page.wxss .page-component{ color:#fff;//有效，繼承樣式 padding:10px;//無(wú)效 } .slot{ color:green; }

  js文件

• //component.js Component({ options: { multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 }, properties: { // 這里定義了innerText屬性，屬性值可以在組件使用時(shí)指定 innerText: { type: String, value: 'default value', //不存在此屬性時(shí) } }, data: { // 這里是一些組件內(nèi)部數(shù)據(jù) someData: {} }, methods: { // 這里是一個(gè)自定義方法 customMethod: function(){} } })

　　Component構(gòu)造器API

 通過(guò)上面的代碼和顯示結(jié)果可以看出：

• slot樣式受page.wxss里的.slot影響顯示綠色，不受component.wxss的.slot影響顯示紅色。
• 繼承樣式，如 font 、 color ，會(huì)從組件外繼承到組件內(nèi)。除繼承樣式外， app.wxss 中的樣式、組件所在頁(yè)面的的樣式對(duì)自定義組件無(wú)效。例子中.page-component的color:#fff能生效，而padding則不生效。

Page與Component數(shù)據(jù)交互

Tip：page代指引用組件頁(yè)面，component代指自定義組件

• page > component

1. page在引用組件時(shí)能通過(guò)屬性值設(shè)置，component.js在properties獲取。
2. page在引用組件時(shí)通data-xxx設(shè)置，component.js在this.dataset獲取。

<!-- page.wxml -->
<component-tag-name fromPage="來(lái)自Page" data-other="from dataset"></component-tag-name>

Component({
  properties: {
    formPage: String  //簡(jiǎn)寫
    /*
    myProperty: { // 屬性名
      type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: '', // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)
      observer: function(newVal, oldVal){} // 屬性被改變時(shí)執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange'
    }
    */
  },
  attached:function(){
    console.log(this.properties.fromPage);
    console.log(this.data.fromPage); //用data也能訪問(wèn)properties
    //設(shè)置properties值用setData()
    this.setData({
      fromPage: '改變了'
    });
    console.log(this.properties.fromPage);
    //通過(guò)dataset獲取data-other的值
    console.log(this.dataset.other);
  }
})

　　參考文檔：微信小程序-自定義組件