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

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

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

1、基本知識

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

全局注冊：在 app.json 文件中配置 usingComponents 節(jié)點進行引用聲明，注冊后可在任意組件使用
局部注冊：在頁面.json 文件中配置 usingComponents 節(jié)點進行引用聲明，只可在當前頁面使用

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

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

2、Properties屬性

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

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

3、slot插槽

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

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

默認情況下，一個組件的 wxml 中只能有一個 slot 。需要使用多 slot 時，可以在組件 js 中聲明啟用。

同時需要給 slot 添加 name 來區(qū)分不同的 slot，給子節(jié)點內(nèi)容添加 slot 屬性來將節(jié)點插入到對應的 slot 中

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

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

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

4、組件樣式隔離

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

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

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

5、組件間通信

父往子傳值：Properties
子往父傳值：自定義事件、獲取組件實例

5.1 自定義事件

自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法發(fā)射一個自定義的事件
自定義組件標簽上通過 bind 方法監(jiān)聽發(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ā)射自定義事件
      // 第二個參數(shù)，是攜帶的參數(shù)
      this.triggerEvent('myevent', this.data.num)
    }
  }
})

父頁面（組件）監(jiān)聽事件：

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

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