淺析小程式中的插槽、父子元件通訊的幾種方式

這篇文章跟大家介紹一下微信小程式中的插槽、父子元件通訊的幾種方式，希望對大家有幫助！

今天我們一起來看看小程式中的插槽和父子元件相互通訊方面的內容，來看一下和vue有什麼樣的差異？ 【相關學習推薦：小程式開發教學】

一、插槽

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(&#39;sync&#39;, {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事件处理函数
  // 切记下面参数不能传递标签选择器 &#39;my-test3&#39;,不然返回的是 null
  const child = this.selectComponent(&#39;.customA&#39;) // 也可以传递 id 选择器 #cA
  child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法
  child.addCount() // 调用子组件的 addCount 方法 
}

更多编程相关知识，请访问：编程入门！！

以上是淺析小程式中的插槽、父子元件通訊的幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！