02-14 自定義組件

1. 自定義組件

小程序允許我們使用自定義組件的方式來構建頁面。

自定義組件

​ 是不是用的微信的組件感覺很爽啊，如果不夠用怎么辦？

​

1.1. 創建自定義組件

類似於頁面，一個自定義組件由 json wxml wxss js 4個文件組成

1.1.1. 聲明組件

首先需要在 json 文件中進行自定義組件聲明

{
  "component": true
}

1.1.2. 編輯組件

同時，還要在 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式

注意：在組件wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器。

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

/* 這里的樣式只應用於這個自定義組件 */
.inner {
  color: red;
}

1.1.3. 注冊組件

在自定義組件的 js 文件中，需要使用 Component() 來注冊組件，並提供組件的屬性定義、內部數據和自定義方法

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這里是一個自定義方法
    customMethod: function(){}
  }
})

1.2. 使用自定義組件

首先要在頁面的 json 文件中進行引用聲明。還要提供對應的組件名和組件路徑

{
	// 引用聲明
  "usingComponents": {
  	// 要使用的組件的名稱     // 組件的路徑
    "component-tag-name": "path/to/the/custom/component"
  }
}

1.3頁面向自定義組件傳遞數據

#頁面中wxml
<my-con  title="{{變量名}}"><my-con/>

 #再組件中
   properties: {
    title:{
      type:String,
      value:"你好"
    }
  }

1.4組件將事件傳給頁面

 頁面
 <my-com title="{{title}}" bind:icre="icre"></my-com>

頁面中js
  icre:function(e){
    console.log(e)
    this.setData({
        num:this.data.num+1
    })
  },

組件中的wxml

<button bindtap='clickpush'>加我</button>

組件中的js

clickpush:function(e){
      console.log(e)
      this.triggerEvent("icre",{"index":13},{})
    }