微信小程序自定義組件和通信的方法

更新時(shí)間：2024年06月20日 11:05:28 作者：激洪

開(kāi)發(fā)中常見(jiàn)的組件主要分為公共組件和頁(yè)面組件兩種,因此注冊(cè)組件的方式也分為兩種全局注冊(cè)和局部注冊(cè),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

1、基本知識(shí)

開(kāi)發(fā)中常見(jiàn)的組件主要分為公共組件和頁(yè)面組件兩種，因此注冊(cè)組件的方式也分為兩種：

全局注冊(cè)：在 app.json 文件中配置 usingComponents 節(jié)點(diǎn)進(jìn)行引用聲明，注冊(cè)后可在任意組件使用
局部注冊(cè)：在頁(yè)面.json 文件中配置 usingComponents 節(jié)點(diǎn)進(jìn)行引用聲明，只可在當(dāng)前頁(yè)面使用

在組件的 .js 中，需要調(diào)用 Component 方法創(chuàng)建自定義組件，Component 中有以下兩個(gè)屬性：

data 數(shù)據(jù)：組件的內(nèi)部數(shù)據(jù)
methods 方法：在組件中事件處理程序需要寫(xiě)到
methods 中才可以其他……

2、Properties屬性

屬性 Properties 是指組件的對(duì)外屬性，主要用來(lái)接收組件使用者傳遞給組件內(nèi)部的數(shù)據(jù)，和 data 一同用于組件的模板渲染

Component({
   properties: {
     // 如果需要接收傳遞的屬性，有兩種方式：全寫(xiě)、簡(jiǎn)寫(xiě)
     label: String // 簡(jiǎn)寫(xiě)
     label: {
       // type 組件使用者傳遞的數(shù)據(jù)類(lèi)型
       // 數(shù)據(jù)類(lèi)型：String、Number、Boolean、Object、Array
       // 也可以設(shè)置為 null，表示不限制類(lèi)型
       type: String,
       value: ''
     },
     // 文字顯示位置
     position: {
       type: String,
       value: 'right'
     }
   }
})

3、slot插槽

在使用基礎(chǔ)組件時(shí)，可以給組件傳遞子節(jié)點(diǎn)傳遞內(nèi)容，從而將內(nèi)容展示到頁(yè)面中，自定義組件也可以接收子節(jié)點(diǎn)內(nèi)容

只不過(guò)在組件模板中需要定義 <slot /> 節(jié)點(diǎn)，用于承載組件引用時(shí)提供的子節(jié)點(diǎn)

默認(rèn)情況下，一個(gè)組件的 wxml 中只能有一個(gè) slot 。需要使用多 slot 時(shí)，可以在組件 js 中聲明啟用。

同時(shí)需要給 slot 添加 name 來(lái)區(qū)分不同的 slot，給子節(jié)點(diǎn)內(nèi)容添加 slot 屬性來(lái)將節(jié)點(diǎn)插入到對(duì)應(yīng)的 slot 中

Component({
  options: {
    // 啟用多 slot 支持
    multipleSlots: true
  }
})

<!-- 子組件 -->
<view>
  <slot name="slot-top" />
  <!-- slot 就是用來(lái)接收、承載子節(jié)點(diǎn)內(nèi)容 -->
  <!-- slot 只是一個(gè)占位符，子節(jié)點(diǎn)內(nèi)容會(huì)將 slot 進(jìn)行替換 -->
  <!-- 默認(rèn)插槽 -->
  <view><slot /></view>
  <slot name="slot-bottom" />
</view>

<custom01>
  <text slot="slot-top">我需要顯示到頂部</text>
  <!-- 默認(rèn)情況下，自定義組件的子節(jié)點(diǎn)內(nèi)容不會(huì)進(jìn)行展示 -->
  <!-- 如果想內(nèi)容進(jìn)行展示，需要再組件模板中定義 slot 節(jié)點(diǎn) -->
  我是子節(jié)點(diǎn)內(nèi)容
  <text slot="slot-bottom">我需要顯示到低部</text>
</custom01>

4、組件樣式隔離

默認(rèn)情況下，自定義組件的樣式只受到自定義組件 wxss 的影響。除非以下兩種情況：

app.wxss 或頁(yè)面. wxss 中使用了標(biāo)簽名（view）選擇器（或一些其他特殊選擇器）來(lái)直接指定樣式，這些選擇器會(huì)影響到頁(yè)面和全部組件。通常情況下這是不推薦的做法。
指定特殊的樣式隔離選項(xiàng) styleIsolation，支持以下取值：
isolated 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會(huì)相互影響（一般情況下的默認(rèn)值）；
apply-shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁(yè)面；
shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會(huì)影響頁(yè)面和其他設(shè)置了 apply-shared 或 shared 的自定義組件。

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

5、組件間通信

父往子傳值：Properties
子往父?jìng)髦担鹤远x事件、獲取組件實(shí)例

5.1 自定義事件

自定義組件觸發(fā)事件時(shí)，需要使用 triggerEvent 方法發(fā)射一個(gè)自定義的事件
自定義組件標(biāo)簽上通過(guò) bind 方法監(jiān)聽(tīng)發(fā)射的事件

子組件觸發(fā)事件：

<!-- 在子組件中 -->
<button type="primary" plain bindtap="sendData">傳遞數(shù)據(jù)</button>

// 在子組件中
Component({
  // 組件的初始數(shù)據(jù)
  data: {
    num: 666
  },
  // 組件的方法列表
  methods: {
    // 將數(shù)據(jù)傳遞給父組件
    sendData () {
      // 如果需要將數(shù)據(jù)傳遞給父組件
      // 需要使用 triggerEvent 發(fā)射自定義事件
      // 第二個(gè)參數(shù)，是攜帶的參數(shù)
      this.triggerEvent('myevent', this.data.num)
    }
  }
})

父頁(yè)面（組件）監(jiān)聽(tīng)事件：

<!-- 在父頁(yè)面（組件）中 -->
<view>{{ num }}</view>
<!-- 需要在自定義組件標(biāo)簽上通過(guò) bind 方法綁定自定義事件，同時(shí)綁定事件處理函數(shù) -->
<custom05 bind:myevent="getData" />

// 在父頁(yè)面（組件）中
Page({
  data: {
    num: ''
  },
  getData (event) {
    // 可以通過(guò)事件對(duì)象.detail 獲取子組件傳遞給父組件的數(shù)據(jù)
    // console.log(event)
    this.setData({
      num: event.detail
    })
  }
})