Dieser Artikel stellt Ihnen die Slots im WeChat-Applet und verschiedene Methoden der Eltern-Kind-Komponentenkommunikation vor. Ich hoffe, er wird Ihnen hilfreich sein!
Heute werfen wir einen Blick auf die Kommunikation zwischen Slots und Eltern-Kind-Komponenten im Miniprogramm und sehen, was die Unterschiede zu Vue sind? [Verwandte Lernempfehlungen:Mini-Programmentwicklungs-Tutorial
In derwxml-Struktur einer benutzerdefinierten Komponente kann ein Knoten (Slot) bereitgestellt werden, um die vom Komponentenbenutzer bereitgestelltewxml-Struktur zu hosten
eigentlich Slot, sagte Je mehr Die beliebte Version ist der Prozess, bei demuntergeordnete Komponenten Löcher graben und übergeordnete Komponenten Löcher füllen. Wenn die übergeordnete Komponente die untergeordnete Komponente verwendet, bestimmt sie einige Layout-Anzeigen innerhalb der untergeordneten Komponente.
wxml结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的wxml结构
其实插槽, 说的通俗一些, 就是子组件挖坑，父组件填坑的过程。由父组件在使用子组件的时候, 决定子组件内部的某一些布局展示
2. 单个插槽
在小程序中，默认每个自定义组件中只允许使用一个slot占位，这种个数上的限制叫做单个插槽
wxml中只能有一个slotslot时，可以在组件js中声明启用代码如下（示例）：
这里是组件的内部节点 这里是插入到组件slot的内容
3. 启动多个插槽
在小程序的自定义组件中，需要使用多 插槽时，可以在组件的.js文件中
代码如下（示例）：
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多 slot 支持 }， properties: { /* ... */ }, methods: { /* ... */ } })
4. 定义多个插槽
可以在组件的.wxml中使用多个 标签，以不同的name来区分不同的插槽
代码如下（示例）：
这是一段固定的文本内容
1. 父子组件通讯方式
属性绑定 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据(只能传递数据，不能传递方法)
事件绑定 用于子组件向父组件传递数据，可以传递任意数据(包括数组和方法)
获取组件实例 父组件还可以通过this.selectComponent()获取子组件实例对象这样就可以直接访问子组件的任意数据和方法
2. 属性绑定
代码如下（示例）：
// 父组件的 data 节点 data: { count: 0 } // 父组件的wxml 结构 ~~ 父组件中，count值为：{{count}}
子组件在 properties 节点中声明对应的属性并使用 代码如下（示例）：
// 子组件的 properties 节点 properties: { count: Number } // 子组件的 wxml 结构 子组件中，count值为：{{count}}
3. 事件绑定的核心实现步骤
事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：
父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件父组件的wxml中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件子组件的js中，通过调用this.triggerEvent('自定义事件名称', {/* 参数对象 */})，将数据发送到父组件js中，通过e.detail获取到子组件传递过来的数据4. 事件绑定的核心实现代码
js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件代码如下（示例）：
// 父组件中定义 syncCount 方法 // 将来，这个方法会被传递给子组件，供子组件进行调用 syncCount() { console.log('syncCount') },
wxml中，通过自定义事件的形式，将 步骤 1 中定义的函数引用，传递给子组件代码如下（示例）：
子组件的js中，通过调用this.triggerEvent('自定义事件名称', {/* 参数对象 */})slot-Platzhalter in jeder benutzerdefinierten Komponente zulässig. Diese Begrenzung der Anzahl wird als einzelner Slot bezeichnet ul>Slotimwxmleiner Komponente gebenSlotverwenden müssen , Es kann in der Komponentejsals aktiviert deklariert werden// 子组件的wxml结构子组件中，count值为：{{count}} // 子组件中的 js 代码 methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent('sync', {value: this.properties.count}) } }
.js Datei der Komponente Der Code lautet wie folgt (Beispiel):syncCount(e) { // console.log(e.detail.value) this.setData({ count: e.detail.value }) }.wxmlder Komponente mit unterschiedlichen < verwenden Code>Name< /code> zur Unterscheidung verschiedener SlotsDer Code lautet wie folgt (Beispiel):
// wxml结构getChild() { // 按钮的tap事件处理函数 // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法 child.addCount() // 调用子组件的 addCount 方法 }
JSON-kompatible Daten festgelegt werden (es können nur Daten übergeben werden, Methoden können nicht übergeben werden)this.selectComponent()abrufen, sodass sie direkt auf alle Daten und Methoden der untergeordneten Komponente zugreifen kann2
übergeordnete Komponenteeine Funktion injs, die in Form von a an die untergeordnete Komponente übergeben wird Benutzerdefiniertes Ereigniswxmlderübergeordneten Komponentedie in Schritt 1 definierte Funktionsreferenz in Form eines benutzerdefinierten Ereignisses an die untergeordnete Komponente.jsvonsubcomponentdurch Aufruf vonthis.triggerEvent('custom event name', {/* parameter object*/})Daten zur übergeordneten Komponentejsder übergeordneten Komponente die von der untergeordneten Komponente übergebenen Daten übere.detail4 Kernimplementierungscode der Ereignisbindung
jsder übergeordneten Komponente eine Funktion, die in Form einer benutzerdefinierten Funktion an das untergeordnete Element übergeben wird event Der Code der Komponente lautet wie folgt (Beispiel): rrreee
wxmlder übergeordneten Komponente auf die in Schritt 1 definierte Funktion die Form eines benutzerdefinierten Ereignisses, das an die Unterkomponente übergeben wird Der Code lautet wie folgt (Beispiel): rrreee
jsvonsub -component, indem Siethis.triggerEvent('custom event name', {/* parameter object*/})aufrufen, Daten an die übergeordnete Komponente sendenDer Code lautet wie folgt (Beispiel):
// 子组件的wxml结构子组件中，count值为：{{count}} // 子组件中的 js 代码 methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent('sync', {value: this.properties.count}) } }
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结构getChild() { // 按钮的tap事件处理函数 // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法 child.addCount() // 调用子组件的 addCount 方法 }
更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonEine kurze Analyse verschiedener Möglichkeiten der Kommunikation zwischen Slots und Eltern-Kind-Komponenten in Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
