Analisis ringkas tentang beberapa cara berkomunikasi antara slot dan komponen ibu bapa-anak dalam program mini

Artikel ini akan memperkenalkan kepada anda slot dalam applet WeChat dan beberapa kaedah komunikasi komponen ibu bapa dan anak saya harap ia akan membantu anda!

Hari ini kita akan melihat pada komunikasi antara slot dan komponen ibu bapa-anak dalam program mini, dan lihat apakah perbezaannya dengan vue? [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

1. ?

Dalam struktur komponen tersuai, anda boleh menyediakan nod (slot) untuk mengehoskan struktur

yang disediakan oleh pengguna komponen

wxmlwxmlSebenarnya, slotting, secara lebih ringkas, adalah proses

. Apabila komponen induk menggunakan komponen anak, ia menentukan beberapa paparan susun atur di dalam komponen anak

Komponen anak mengisi lubang dengan menggali lubang

子组件挖坑，父组件填坑Komponen induk mengisi lubang dengan kandungan di tengah teg komponen

• 2 Slot tunggal

Dalam applet, secara lalai hanya satu dibenarkan masuk. setiap komponen tersuai Pemegang tempat, had pada nombor ini dipanggil slot tunggal

Secara lalai, hanya satu

slot

dalam

komponen perlu digunakan Apabila terdapat berbilang
• s, anda boleh mengisytiharkan dan mendayakan wxmlslot
dalam komponen
• Nota slot: Pada masa ini hanya terdapat slot lalai dan berbilang slot dalam program mini, dan slot skop belum disokong lagi >js
dalam Dalam komponen tersuai applet, apabila anda perlu menggunakan berbilang slot, anda boleh meletakkan kod
• dalam fail komponen seperti berikut (contoh):

<!-- 组件的封装者 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <!-- 对于不确定的内容，可以使用<slot>进行占位，具体的内容由组件的使用者决定 -->
  <slot></slot>
</view>

<!-- 组件的使用者 -->
<component-tag-name>
  <!-- 这部分内容将被放置在组件<slot>的位置上 -->
  <view>这里是插入到组件slot的内容</view>
</component-tag-name>

4 Tentukan berbilang slot

Anda boleh menggunakan berbilang tag dalam komponen untuk membezakan slot yang berbeza dengan

yang berbeza

.jsKod adalah seperti berikut (contoh):

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
  }，
  properties: { /* ... */ },
  methods: { /* ... */ }
})

2 Komunikasi komponen ibu bapa-anak

1. . Digunakan untuk komponen induk untuk menetapkan data kepada sifat komponen anak yang ditentukan Hanya

data yang serasi boleh ditetapkan (hanya data boleh dihantar, kaedah tidak boleh diluluskan)

.wxmlname

mengikat peristiwa. Digunakan untuk komponen anak untuk menghantar data kepada komponen induk Sebarang data (termasuk tatasusunan dan kaedah) boleh dihantar

<!-- 组件模板 -->
<view class="wrapper">
  <!-- name 为 before 的第一个 slot 插槽 -->
  <slot name="before"></slot>
  <view>这是一段固定的文本内容</view>
  <!-- name 为 after 的第二个 slot 插槽 -->
  <slot name="after"></slot>
</view>

Dapatkan contoh komponen. Komponen induk juga boleh mendapatkan objek contoh komponen anak melalui supaya ia boleh mengakses terus sebarang data dan kaedah komponen anak

2. Atribut mengikat

• Pas data Pengikatan harta digunakan untuk memindahkan nilai dari ibu bapa kepada anak dan hanya boleh menghantar jenis data biasa yang tidak boleh dihantar kepada komponen anak JSON

Kodnya adalah seperti berikut (contoh):
Terima data

• this.selectComponent()Subkomponen mengisytiharkan sifat yang sepadan dalam nod sifat dan menggunakan Kodnya adalah seperti berikut (contoh):

3 Langkah pelaksanaan teras pengikatan acara

Pengikatan acara digunakan untuk melaksanakan. sub-arah Nilai pas-demi-induk boleh menghantar sebarang jenis data. Langkah penggunaan adalah seperti berikut:

• Dalam

's

, tentukan fungsi, yang akan dihantar kepada sub-komponen

// 父组件的 data 节点
data: {
  count: 0
}

// 父组件的wxml 结构
<my-test3 count="{{count}}"></my-test3>
<view>~~</view>
<view>父组件中，count值为：{{count}}</view>

dalam

Dalam
• , hantarkan rujukan fungsi yang ditakrifkan dalam langkah 1 kepada sub-komponen
dalam bentuk acara tersuai

Dalam

's

, dengan memanggil

// 子组件的 properties 节点
properties: {
  count: Number
}

// 子组件的 wxml 结构
<text>子组件中，count值为：{{count}}</text>

, Data dihantar. kepada komponen induk

Dalam komponen induk , data yang diluluskan oleh komponen anak diperoleh melalui

4. Peristiwa kod pelaksanaan teras pengikatan
• 父组件js
• Langkah 1: Dalam 父组件 komponen induk, tentukan fungsi, yang akan dihantar kepada anak dalam bentuk acara tersuai kod komponen wxml
• adalah seperti berikut (contoh): 子组件jsthis.triggerEvent('自定义事件名称', {/* 参数对象 */})
Langkah 2: Dalam
• komponen induk, tambah langkah 1 dalam borang acara tersuai Rujukan fungsi yang ditakrifkan dalam dihantar kepada subkomponen jse.detail
Kod adalah seperti berikut (contoh):

Langkah 3: Dalam daripada , Dengan memanggil

, hantar data kepada komponen induk

• jsKodnya adalah seperti berikut (contoh):

// 子组件的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 方法 
}

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

Atas ialah kandungan terperinci Analisis ringkas tentang beberapa cara berkomunikasi antara slot dan komponen ibu bapa-anak dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!