Une brève analyse de plusieurs façons de communiquer entre les slots et les composants parent-enfant dans les mini-programmes

Cet article vous présentera les emplacements de l'applet WeChat et plusieurs méthodes de communication entre les composants parent-enfant. J'espère qu'il vous sera utile !

Aujourd'hui, nous allons examiner la communication entre les slots et les composants parent-enfant dans le mini programme, et voir quelles sont les différences avec vue ? [Recommandations d'apprentissage associées :Tutoriel de développement de mini-programmes]

1. Slots

1.

Dans la structurewxmld'un composant personnalisé, un nœud (slot) peut être fourni pour héberger la structurewxmlfournie par l'utilisateur du composantwxml结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的wxml结构

其实插槽, 说的通俗一些, 就是子组件挖坑，父组件填坑的过程。由父组件在使用子组件的时候, 决定子组件内部的某一些布局展示

• 子组件通过挖坑
• 父组件通过组件标签中间的内容来填坑

2. 单个插槽

在小程序中，默认每个自定义组件中只允许使用一个slot占位，这种个数上的限制叫做单个插槽

• 默认情况下，一个组件的wxml中只能有一个slot
• 需要使用多slot时，可以在组件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. 事件绑定的核心实现代码

• 步骤1： 在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

代码如下（示例）：

// 父组件中定义 syncCount 方法 // 将来，这个方法会被传递给子组件，供子组件进行调用 syncCount() { console.log('syncCount') },

• 步骤 2：在父组件的wxml中，通过自定义事件的形式，将 步骤 1 中定义的函数引用，传递给子组件

代码如下（示例）：

• 步骤 3：在子组件的js中，通过调用this.triggerEvent('自定义事件名称', {/* 参数对象 */})

en fait, dit Le plus La version populaire est le processus par lequel lescomposants enfants creusent des trous et les composants parents remplissent les trous. Lorsque le composant parent utilise le composant enfant, il détermine une certaine disposition d'affichage à l'intérieur du composant enfant

• Le composant enfant creuse des trous
• Le composant parent remplit le trou à travers le contenu au milieu de la balise du composant. 2. Emplacement uniqueDans le mini programme, par défaut, un seul espace réservéslotest autorisé dans chaque composant personnalisé. Cette limite du nombre est appelée un seul emplacement<. ul>
• Par défaut, il ne peut y avoir qu'un seulslotdans lewxmld'un composant
• Lorsque vous devez utiliser plusieursslot, Il peut être déclaré activé dans le composantjs
• Remarque : Il n'y a actuellement que des emplacements par défaut et plusieurs emplacements dans l'applet, et les emplacements de portée ne sont pas encore pris en charge Le code est la suivante (exemple ):

  // 子组件的wxml结构 子组件中，count值为：{{count}} +1 // 子组件中的 js 代码 methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent('sync', {value: this.properties.count}) } }

  Copier après la connexion

  Copier après la connexion
  3. Démarrez plusieurs slotsDans le composant personnalisé du mini programme, lorsque vous devez utiliser plusieurs slots, vous pouvez dans le.js fichier du composant Le code est le suivant (exemple) :

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

  Copier après la connexion

  Copier après la connexion
  4 Définissez plusieurs slotsVous pouvez utiliser plusieurs balises dans le .wxmldu composant avec différents <. code>nom< /code> pour distinguer les différents emplacementsLe code est le suivant (exemple) :

  // wxml结构  获取子组件实例 getChild() { // 按钮的tap事件处理函数 // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法 child.addCount() // 调用子组件的 addCount 方法 }

  Copier après la connexion

  Copier après la connexion
  2. Communication des composants parent-enfant1. ul>
• Liaison d'attribut Utilisé pour les composants parents pour définir les données sur les propriétés spécifiées des composants enfants. Seules les données compatiblesJSONpeuvent être définies (seules les données peuvent être transmises, les méthodes ne peuvent pas être transmises)
• Liaison d'événement. Utilisé pour que les composants enfants transmettent des données aux composants parents. Toutes les données (y compris les tableaux et les méthodes) peuvent être transmises
• Obtenir l'instance du composant. Le composant parent peut également obtenir l'objet instance du composant enfant viathis.selectComponent(), afin qu'il puisse accéder directement à toutes les données et méthodes du composant enfant2.
  • Transférer des données La liaison de propriété est utilisée pour transférer des valeurs du parent à l'enfant et ne peut transmettre que des types de données ordinaires. Les méthodes ne peuvent pas être transmises aux composants enfants. Le code est le suivant (exemple) : rrreee
    • . Acceptez les données Les sous-composants déclarent les propriétés correspondantes dans le nœud de propriétés et utilisent Le code est le suivant (exemple) : rrreee3. Les principales étapes de mise en œuvre de la liaison d'événementLa liaison d'événement est utilisée pour transférer des valeurs de l'enfant au parent, et tout type de données peut être passé. Les étapes sont les suivantes :
      • Danscomposant parent, définissez une fonction enjs. Cette fonction sera passée au composant enfant sous la forme de. un événement personnalisé.
      • Danswxmlducomposant parent, transmettez la référence de fonction définie à l'étape 1 au composant enfant sous la forme d'un événement personnalisé
      • Dans Dansjsdusous-composant, en appelantthis.triggerEvent('custom event name', {/*setting object*/}), Envoyer des données au composant parent
      • Dans lejsdu composant parent, obtenez les données transmises par le composant enfant viae.detail4 . Le code d'implémentation principal de la liaison d'événement
        • Étape 1 : Dans lejsdu composant parent, définissez une fonction qui sera transmise à l'enfant sous la forme de. un événement personnalisé Le code du composant est le suivant (exemple) : rrreee
          • Etape 2 : Dans lewxmldu composant parent, référencez la fonction définie à l'étape 1 sous la forme d'un événement personnalisé, passé au sous-composant Le code est le suivant (exemple) : rrreee
            • Étape 3 : Dansjsdesous-composant, en appelantthis.triggerEvent('custom event name', {/*setting object*/}), envoyez les données au composant parentLe code est comme suit (exemple) :

              // 子组件的wxml结构 子组件中，count值为：{{count}} +1 // 子组件中的 js 代码 methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent('sync', {value: this.properties.count}) } }

              Copier après la connexion

              Copier après la connexion
              • 步骤 4：在父组件的js中，通过e.detail获取到子组件传递过来的数据

              代码如下（示例）：

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

              Copier après la connexion

              Copier après la connexion

              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 方法 }

              Copier après la connexion

              Copier après la connexion

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

              Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!