// index.wxml 
 <lamp Marquistext="{{notice.notice}}" bindtap="hiuan" hidden="{{npm}}" id="lamp"></lamp>
// index.json
  "usingComponents": {
       "lamp": "../lamp/lamp"    // 引入lamp組件
  }
// index.js
 this.lamp = this.selectComponent("#lamp")
 this.lamp.startSetInter(this.rolltime);  // 調(diào)用

組件：lamp

/* lamp.json*/
{
"component": true
}

lamp.wxml && lamp.wxss 和其他頁面一樣沒什么不同

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項(xiàng)中啟用多slot支持
  },
  // 接受從頁面?zhèn)鬟f過來的參數(shù)
  properties: {
    Marquistext: {
      type: String,
      value: "默認(rèn)值",     // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個
      observer: function(newVal, oldVal){} 
  // 屬性被改變時執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如：'propertyChange'
    },
    Marquistext: String    // 簡寫方式
  },
  // 組建的私有數(shù)據(jù)
  data: {},
  attached: function(){
  //組件生命周期函數(shù)，在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時執(zhí)行
  },
  moved: function(){
  // 組件生命周期函數(shù)，在組件實(shí)例被移動到節(jié)點(diǎn)樹另一個位置時執(zhí)行
  },
  detached: function(){
  //組件生命周期函數(shù)，在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時執(zhí)行
  },
  // 組建的方法
  methods: {
    hideDialog: function () { },
    startSetInter: function (e) {
      // 
    }
  }
});

插入模板 單個solt（默認(rèn)單個）

// page模板
<view>
    <view>這里是page的內(nèi)容</view>
    <tag><view>這里是插入到組件slot中的內(nèi)容</view></tag>
  </view>

// component模板
<view>
  <view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
  <slot></slot>
</view>

// page頁面
這里是page的內(nèi)容
這里是組件的內(nèi)部節(jié)點(diǎn)
這里是插入到組件slot中的內(nèi)容

插入模板 多個solt

可以在這個組件的wxml中使用多個slot，以不同的 name 來區(qū)分。

// 必須配置此選項(xiàng)，否則不會生效
 options: {
    multipleSlots: true // 在組件定義時的選項(xiàng)中啟用多slot支持
  },

<!-- 引用組件的頁面模板 -->
<view>
  <component-tag-name>
    <!-- 這部分內(nèi)容將被放置在組件 <slot name="before"> 的位置上 -->
    <view slot="before">插入到組件slot name="before"中</view>  // 
    <view slot="after">插入到組件slot name="after"中</view> 
    <!-- 組件 <slot name="after"> 的位置 -->
  </component-tag-name>
</view>

// component模板
<view class="wrapper">
  <slot name="before"></slot>
  <view>這里是組件的內(nèi)部細(xì)節(jié)</view>
  <slot name="after"></slot>
</view>

組建樣式

組件默認(rèn)樣式

 //component .wxss
:host {
  color: yellow;
···
}

組件引用外部的樣式

<!-- page模板 -->
  <component-tag-name class="my-class" >xxxxx</component-tag-name>
<!-- page .wxss--> 
.my-class{
  color: #fff
}

 <!--  component.js--> 
Component({
  externalClasses: ['my-class']
})
  <!-- component .wxss  --> 
:host {        //此時 設(shè)置的樣式不會起作用，還是會用my-class的樣式
  color: yellow;
···
}

組件組建 全局&&page 的樣式(會污染組建樣式)

/* 組件 component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})