微信小程序 - 組件 | 自定義組件 | 組件事件傳遞頁面

 

組件

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

自定義組件

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

1.創建

1.創建components文件夾

2.在components文件下創建comp1文件夾

3.comp1 文件夾下創建Component文件

2.聲明組件

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

{
    "component": true,  // 會自動生成
}

 

3.輯組件

與其他頁面一樣 在 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式

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

comp.wxml

<!-- 這是自定義組件的內部WXML結構 -->
<text>{{innerText}}</text>

 

4.注冊組件

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

comp.js

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

// compinent 類似頁面js文件中的的 page
// properties 類似頁面的js文件中的 data

 

使用自定義組件

1.引入組件

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

test.json

{
  "usingComponents": {
    "comp": "/components/comp/comp"  // 組件路徑
  },
  "navigationBarTitleText": "自定義組件"  // 組件頁面台頭名
}

 

2.頁面使用組件

test.wxml

<comp innerText='重新賦值'></comp>  
<!--主頁引用組件時,可以重新給組件中的變量重新賦值-->

 

組件將事件傳給頁面

組件中:

comp.wxml

<button bind:tap="click"  data-ss="123">按鈕</button>  // 按鈕會渲染到頁面

 

comp.js

組件的事件要在組件的js文件中的methods方法屬性中實現

methods: {
    click: function (e) {
      // console.log(e)
      this.triggerEvent("icre", { "index": 323 }, {})
    }
  }
// triggerEvent 關鍵字用於將事件傳遞給頁面
// icer (可自定義) 頁面通過 bind:icre 獲取組件事件
// { "index": 323 } 為組件事件攜帶的數據

 

頁面中:

test.wxml

<comp bind:icre="click"></comp>

 

test.js

Page({
   data{
    num:0, 
}，
// 頁面實現 icer 事件
click: function (e) {
    console.log(e)
    this.setData({
      num: this.data.num + 1
    })
    // this.data.num = this.data.num+1
  },

})