js小程序中插槽、父子組件通訊的方式有哪些

本篇內容主要講解“js小程序中插槽、父子組件通訊的方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“js小程序中插槽、父子組件通訊的方式有哪些”吧!

一、插槽

1. 什么是插槽？

在自定義組件的 wxml 結構中，可以提供一個 節點（插槽），用于承載組件使用者提供的 wxml 結構

其實插槽, 說的通俗一些, 就是 子組件挖坑，父組件填坑 的過程。由父組件在使用子組件的時候, 決定子組件內部的某一些布局展示

• 子組件通過挖坑

• 父組件通過組件標簽中間的內容來填坑

2. 單個插槽

在小程序中，默認每個自定義組件中只允許使用一個  slot 占位，這種個數上的限制叫做單個插槽

• 默認情況下，一個組件的 wxml 中只能有一個 slot

• 需要使用多 slot 時，可以在組件 js 中聲明啟用

• 注意：小程序中目前只有默認插槽和多個插槽，暫不支持作用域插槽

代碼如下（示例）：

<!-- 組件的封裝者 -->
<view class="wrapper">
  <view>這里是組件的內部節點</view>
  <!-- 對于不確定的內容，可以使用<slot>進行占位，具體的內容由組件的使用者決定 -->
  <slot></slot>
</view>

<!-- 組件的使用者 -->
<component-tag-name>
  <!-- 這部分內容將被放置在組件<slot>的位置上 -->
  <view>這里是插入到組件slot的內容</view>
</component-tag-name>

3. 啟動多個插槽

在小程序的自定義組件中，需要使用多 插槽時，可以在組件的 .js 文件中

代碼如下（示例）：

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多 slot 支持
  }，
  properties: { /* ... */ },
  methods: { /* ... */ }
})

4. 定義多個插槽

可以在組件的 .wxml 中使用多個 標簽，以不同的 name 來區分不同的插槽

代碼如下（示例）：

<!-- 組件模板 -->
<view class="wrapper">
  <!-- name 為 before 的第一個 slot 插槽 -->
  <slot name="before"></slot>
  <view>這是一段固定的文本內容</view>
  <!-- name 為 after 的第二個 slot 插槽 -->
  <slot name="after"></slot>
</view>

二、父子組件通訊

1.  父子組件通訊方式

• 屬性綁定 用于父組件向子組件的指定屬性設置數據，僅能設置 JSON 兼容的數據(只能傳遞數據，不能傳遞方法)

• 事件綁定 用于子組件向父組件傳遞數據，可以傳遞任意數據(包括數組和方法)

• 獲取組件實例 父組件還可以通過 this.selectComponent() 獲取子組件實例對象這樣就可以直接訪問子組件的任意數據和方法

2. 屬性綁定

• 傳遞數據 屬性綁定用于實現父向子傳值，而且只能傳遞普通類型的數據，無法將方法傳遞給子組件

代碼如下（示例）：

// 父組件的 data 節點
data: {
  count: 0
}

// 父組件的wxml 結構
<my-test3 count="{{count}}"></my-test3>
<view>~~</view>
<view>父組件中，count值為：{{count}}</view>

• 接受數據

子組件在  properties 節點中聲明對應的屬性并使用 代碼如下（示例）：

// 子組件的 properties 節點
properties: {
  count: Number
}

// 子組件的 wxml 結構
<text>子組件中，count值為：{{count}}</text>

3. 事件綁定的核心實現步驟

事件綁定用于實現子向父傳值，可以傳遞任何類型的數據。使用步驟如下：

• 在 父組件 的 js 中，定義一個函數，這個函數即將通過自定義事件的形式，傳遞給子組件

• 在 父組件 的 wxml 中，通過自定義事件的形式，將步驟 1 中定義的函數引用，傳遞給子組件

• 在 子組件的 js 中，通過調用 this.triggerEvent('自定義事件名稱', {/* 參數對象 */})，將數據發送到父組件

• 在父組件的 js 中，通過 e.detail 獲取到子組件傳遞過來的數據

4. 事件綁定的核心實現代碼

• 步驟1： 在父組件的 js 中，定義一個函數，這個函數即將通過自定義事件的形式，傳遞給子組件

代碼如下（示例）：

// 父組件中定義 syncCount 方法
// 將來，這個方法會被傳遞給子組件，供子組件進行調用
syncCount() {
  console.log('syncCount')
},

• 步驟 2：在父組件的 wxml 中，通過自定義事件的形式，將 步驟 1 中定義的函數引用，傳遞給子組件

代碼如下（示例）：

<!-- 使用 bind: 自定義事件名稱(推薦：結構清晰) -->
<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>
<!-- 或在 bind 后面直接協商自定義事件名稱 -->
<my-test3 count="{{count}}" bindsync="syncCount"></my-test3>

• 步驟 3：在 子組件的 js 中，通過調用 this.triggerEvent('自定義事件名稱', {/* 參數對象 */})，將數據發送到父組件

代碼如下（示例）：

// 子組件的wxml結構
<text>子組件中，count值為：{{count}}</text>
<button type="primary" bindtap="addCount">+1</button>

// 子組件中的 js 代碼
methods: {
  addCount() {
    this.setData({
      count: this.properties.count + 1
    })
    this.triggerEvent('sync', {value: this.properties.count})
  }
}

• 步驟 4：在父組件的 js 中，通過 e.detail 獲取到子組件傳遞過來的數據

代碼如下（示例）：

syncCount(e) {
  // console.log(e.detail.value)
  this.setData({
    count: e.detail.value
  })
}

5. 使用 selectComponent 獲取組件實例

父組件如何獲得子組件實例？

可在父組件里調用  this.selectComponent("id或class選擇器")，獲取子組件的實例對象，從而直接訪問子組件的任意數據和方法。調用時需要傳入一個選擇器，例如  this.selectComponent(".my-component")

代碼如下（示例）：

// wxml結構
<my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3>
<button bindtap="getChild">獲取子組件實例</button>

getChild() { // 按鈕的tap事件處理函數
  // 切記下面參數不能傳遞標簽選擇器 'my-test3',不然返回的是 null
  const child = this.selectComponent('.customA') // 也可以傳遞 id 選擇器 #cA
  child.setData({ count: child.properties.count + 1 }) // 調用子組件的 setData 方法
  child.addCount() // 調用子組件的 addCount 方法 
}

到此，相信大家對“js小程序中插槽、父子組件通訊的方式有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！