Heim >WeChat-Applet >Mini-Programmentwicklung >Eine kurze Analyse verschiedener Möglichkeiten der Kommunikation zwischen Slots und Eltern-Kind-Komponenten in Miniprogrammen
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 der wxml
-Struktur einer benutzerdefinierten Komponente kann ein Knoten (Slot) bereitgestellt werden, um die vom Komponentenbenutzer bereitgestellte wxml
-Struktur zu hosteneigentlich Slot, sagte Je mehr Die beliebte Version ist der Prozess, bei dem untergeordnete 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
中只能有一个 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. 事件绑定的核心实现代码
js
中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件代码如下(示例):
// 父组件中定义 syncCount 方法 // 将来,这个方法会被传递给子组件,供子组件进行调用 syncCount() { console.log('syncCount') },
wxml
中,通过自定义事件的形式,将 步骤 1 中定义的函数引用,传递给子组件代码如下(示例):
<!-- 使用 bind: 自定义事件名称(推荐:结构清晰) --> <my-test3 count="{{count}}" bind:sync="syncCount"></my-test3> <!-- 或在 bind 后面直接协商自定义事件名称 --> <my-test3 count="{{count}}" bindsync="syncCount"></my-test3>
子组件
的 js
中,通过调用 this.triggerEvent('自定义事件名称', {/* 参数对象 */})
2. Einzelner Slot🎜🎜🎜🎜Im Miniprogramm ist standardmäßig nur ein
slot
-Platzhalter in jeder benutzerdefinierten Komponente zulässig. Diese Begrenzung der Anzahl wird als einzelner Slot bezeichnet ul>Slot
im wxml
einer Komponente geben 🎜Slot
verwenden müssen , Es kann in der Komponente js
als aktiviert deklariert werden 🎜// 子组件的wxml结构 <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}) } }🎜🎜🎜3. Starten Sie mehrere Slots🎜🎜🎜🎜Wenn Sie in der benutzerdefinierten Komponente des Miniprogramms mehrere Slots verwenden müssen, können Sie dies in der Datei
.js
tun > Datei der Komponente🎜 🎜Der Code lautet wie folgt (Beispiel):🎜syncCount(e) { // console.log(e.detail.value) this.setData({ count: e.detail.value }) }🎜🎜🎜4. Definieren Sie mehrere Slots🎜🎜🎜🎜Sie können mehrere Tags in der
.wxml
der Komponente mit unterschiedlichen Name zur Unterscheidung verschiedener Slots🎜🎜Der Code lautet wie folgt (Beispiel):🎜// wxml结构 <my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3> <button bindtap="getChild">获取子组件实例</button> getChild() { // 按钮的tap事件处理函数 // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法 child.addCount() // 调用子组件的 addCount 方法 }🎜🎜2. Kommunikation zwischen Eltern-Kind-Komponenten🎜🎜🎜
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 kann🎜🎜🎜🎜🎜🎜2 🎜🎜übergeordnete Komponente
eine Funktion in js
, die in Form von a an die untergeordnete Komponente übergeben wird Benutzerdefiniertes Ereignis 🎜wxml
der übergeordneten Komponente
die in Schritt 1 definierte Funktionsreferenz in Form eines benutzerdefinierten Ereignisses an die untergeordnete Komponente. 🎜js
von subcomponent
durch Aufruf von this.triggerEvent('custom event name', {/* parameter object*/})
Daten zur übergeordneten Komponente🎜js
der übergeordneten Komponente die von der untergeordneten Komponente übergebenen Daten über e.detail
🎜🎜🎜🎜🎜4 Kernimplementierungscode der Ereignisbindung🎜🎜🎜js
der ü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): 🎜rrreeewxml
der ü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): 🎜rrreeejs
von sub -component
, indem Sie this.triggerEvent('custom event name', {/* parameter object*/})
aufrufen, Daten an die übergeordnete Komponente senden🎜🎜🎜Der Code lautet wie folgt (Beispiel):🎜// 子组件的wxml结构 <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}) } }
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事件处理函数 // 切记下面参数不能传递标签选择器 '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!