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

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供興隆臺(tái)網(wǎng)站建設(shè)、興隆臺(tái)做網(wǎng)站、興隆臺(tái)網(wǎng)站設(shè)計(jì)、興隆臺(tái)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、興隆臺(tái)企業(yè)網(wǎng)站模板建站服務(wù)，十余年興隆臺(tái)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

一、插槽

1. 什么是插槽？

在自定義組件的 wxml 結(jié)構(gòu)中，可以提供一個(gè) 節(jié)點(diǎn)（插槽），用于承載組件使用者提供的 wxml 結(jié)構(gòu)

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

• 子組件通過挖坑

• 父組件通過組件標(biāo)簽中間的內(nèi)容來填坑

2. 單個(gè)插槽

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

• 默認(rèn)情況下，一個(gè)組件的 wxml 中只能有一個(gè) slot

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

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

代碼如下（示例）：

<!-- 組件的封裝者 -->
<view class="wrapper">
  <view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
  <!-- 對(duì)于不確定的內(nèi)容，可以使用<slot>進(jìn)行占位，具體的內(nèi)容由組件的使用者決定 -->
  <slot></slot>
</view>

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

3. 啟動(dòng)多個(gè)插槽

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

代碼如下（示例）：

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

4. 定義多個(gè)插槽

可以在組件的 .wxml 中使用多個(gè) 標(biāo)簽，以不同的 name 來區(qū)分不同的插槽

代碼如下（示例）：

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

二、父子組件通訊

1.  父子組件通訊方式

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

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

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

2. 屬性綁定

• 傳遞數(shù)據(jù) 屬性綁定用于實(shí)現(xiàn)父向子傳值，而且只能傳遞普通類型的數(shù)據(jù)，無法將方法傳遞給子組件

代碼如下（示例）：

// 父組件的 data 節(jié)點(diǎn)
data: {
  count: 0
}

// 父組件的wxml 結(jié)構(gòu)
<my-test3 count="{{count}}"></my-test3>
<view>~~</view>
<view>父組件中，count值為：{{count}}</view>

• 接受數(shù)據(jù)

子組件在  properties 節(jié)點(diǎn)中聲明對(duì)應(yīng)的屬性并使用 代碼如下（示例）：

// 子組件的 properties 節(jié)點(diǎn)
properties: {
  count: Number
}

// 子組件的 wxml 結(jié)構(gòu)
<text>子組件中，count值為：{{count}}</text>

3. 事件綁定的核心實(shí)現(xiàn)步驟

事件綁定用于實(shí)現(xiàn)子向父?jìng)髦?，可以傳遞任何類型的數(shù)據(jù)。使用步驟如下：

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

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

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

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

4. 事件綁定的核心實(shí)現(xiàn)代碼

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

代碼如下（示例）：

// 父組件中定義 syncCount 方法
// 將來，這個(gè)方法會(huì)被傳遞給子組件，供子組件進(jìn)行調(diào)用
syncCount() {
  console.log('syncCount')
},

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

代碼如下（示例）：

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

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

代碼如下（示例）：

// 子組件的wxml結(jié)構(gòu)
<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 獲取到子組件傳遞過來的數(shù)據(jù)

代碼如下（示例）：

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

5. 使用 selectComponent 獲取組件實(shí)例

父組件如何獲得子組件實(shí)例？

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

代碼如下（示例）：

// wxml結(jié)構(gòu)
<my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3>
<button bindtap="getChild">獲取子組件實(shí)例</button>

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

到此，相信大家對(duì)“js小程序中插槽、父子組件通訊的方式有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文名稱：js小程序中插槽、父子組件通訊的方式有哪些
當(dāng)前鏈接：http://chinadenli.net/article44/giseee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、品牌網(wǎng)站建設(shè)、虛擬主機(jī)、搜索引擎優(yōu)化、小程序開發(fā)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)