This article will introduce to you the slots in the WeChat applet and several methods of parent-child component communication. I hope it will be helpful to you!

Today we will take a look at the communication between slots and parent-child components in the mini program, and see what the differences are with vue? [Related learning recommendations: 小program development tutorial]

1. Slot

1. What is a slot ?

In the wxml structure of a custom component, a node (slot) can be provided to host the wxml## provided by the component user. # Structure

#In fact, the slot, to put it more simply, is the process of

the sub-component digging the hole and the parent component filling the hole . When the parent component uses the child component, it determines some layout display inside the child component

The child component fills the hole by digging holes
• The parent component fills the hole through the content in the middle of the component tag

2. Single slot

In the applet, by default only one is allowed in each custom component

slot Placeholder, this limit on the number is called a single slot

By default, there can only be one
• in a component's wxml slot
When you need to use multiple
• slot, you can declare the enablement in the component
js
• Note: small Currently, there are only default slots and multiple slots in the program. Scope slots are not supported at the moment.

The code is as follows (example):

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

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

3. Start multiple slots

In the custom component of the applet, when you need to use multiple slots, you can

in the .js file of the component

The code is as follows (example):

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

4. Define multiple slots

Can be in the component's

.wxml Use multiple tags in to distinguish different slots with different name

The code is as follows (example):

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

2. Father and son Component communication

1. Parent-child component communication

• Property binding Used for parent components to set data to specified properties of child components. Only

  JSON compatible data can be set (only data can be passed, methods cannot be passed)

• Event binding Certainly Used for child components to pass data to parent components. You can pass any data (including arrays and methods)

• Get the component instance The parent component can also obtain the child component instance object through

  this.selectComponent() so that it can directly access any data and methods of the child component

2. Attribute binding

#Transfer data Property binding is used to transfer values ????from parent to child, and can only pass common types of data. Methods cannot be passed to child components.

The code is as follows (example):

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

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

Accept data

The subcomponent declares the corresponding properties in the properties node and uses The code is as follows (example):

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

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

3. The core implementation steps of event binding

Event binding is used to realize the transmission from child to parent Value, any type of data can be passed. The usage steps are as follows:

In
• js of parent component, define a function, which will be passed to the child component in the form of a custom event
In
• wxml of the parent component, pass the function reference defined in step 1 to the child component## in the form of a custom event #In
js
• of subcomponent, by calling this.triggerEvent('custom event name', {/* parameter object*/}), Data is sent to the parent componentIn the
js
• of the parent component, the data passed by the child component is obtained through e.detail

4. The core implementation code of event binding

Step 1: In the

js
• of the parent component, define a function , this function will be passed to the child component in the form of a custom event
The code is as follows (example):

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

Step 2: In the parent component's

In wxml
• , pass the function reference defined in step 1 to the sub-component in the form of a custom event
The code is as follows (example):

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

Step 3: In

js
• of subcomponent, by calling this.triggerEvent('custom event name', {/* parameter object*/}), send data to the parent component
The code is as follows (example):

// 子組件的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 獲取到子組件傳遞過來的數(shù)據(jù)

代碼如下（示例）：

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

5. 使用 selectComponent 獲取組件實例

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

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

代碼如下（示例）：

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

getChild() { // 按鈕的tap事件處理函數(shù)
  // 切記下面參數(shù)不能傳遞標簽選擇器 &#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 方法 
}

更多編程相關知識，請訪問：編程入門??！

The above is the detailed content of A brief analysis of several ways of communicating between slots and parent-child components in mini programs. For more information, please follow other related articles on the PHP Chinese website!