Comment utiliser les composants Component dans les mini-programmes ? Partage de guide pratique

Comment utiliser Component dans un mini programme ? L'article suivant partagera avec vous un guide complet et pratique du composant personnalisé d'un petit programme. J'espère qu'il vous sera utile !

Dans le mini-programme, si nous voulons extraire les modules fonctionnels de la page et les réutiliser dans différentes pages, nous pouvons utiliser ses composants personnalisés, qui peuvent diviser des pages complexes en plusieurs modules à faible couplage. n'est pas seulement pratique à utiliser, mais facilite également la maintenance de notre code. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]Avant-propos

Dans cet article, vous apprendrez

Comment utiliser des composants personnalisés dans de petits programmes
Divers transferts de valeur entre composants personnalisés
Le utilisation des emplacements dans les composants personnalisés

Déminage, le mini programme de cet article fait référence au mini programme WeChat (mais les idées des autres mini programmes devraient être similaires)
Déminage, le contenu principal de cet article concerne les composants personnalisés Diverses utilisations, pas pour vous apprendre à empaqueter des composants !
Préparation de base (peut être ignorée)

Ajouter un nouveau dossier

Créez d'abord un dossier spécifiquement pour les composants personnalisés dans le répertoire racine (le nom du dossier est arbitraire et l'emplacement est arbitraire)

Nouveau composant Fichier

Puis faites un clic droit dans le mini éditeur de programme et créez un nouveau Composant

Pourquoi devez-vous mentionner spécifiquement cette étape ?

Je ne sais pas s'il y a des amis qui, comme moi, n'utilisent que de petits outils de développement de programmes comme outils de prévisualisation, puis utilisent d'autres éditeurs pour le développement.

Plus tard, j'ai découvert que si je crée un composant ou une page directement dans le mini programme, il créera les quatre fichiers en une seule fois, et le modèle de contenu sera également rempli, donc maintenant en plus de prévisualiser le développeur outils, je l'utilise également pour créer de nouveaux fichiers.

Exemple de description d'arrière-plan

Nous utiliserons le titre de segmentation du module dans l'image ci-dessous comme exemple pour écrire un exemple de composant simple (juste un exemple aveugle)

Comment introduire des composants personnalisés ?

Pas grand chose à dire sur la création, suivez simplement ce qui précède [Nouveau fichier de composant]. Si vous le créez manuellement, n'oubliez pas de le déclarer dans le fichier json (il est inclus par défaut dans l'outil de développement du mini programme)

{
  "component": true
}

Introduisez la méthode du composant

Faites une déclaration de référence dans le fichier json de la page

<!-- 引用组件的json文件 -->
{
  "usingComponents": {
    "x-title": "/components/title/title"
  }
}

Utilisez le composant personnalisé dans le wxml de la page tout comme le composant de base (le nom et la déclaration restent les mêmes Cohérent) json 文件中进行引用声明

<!-- 引用组件的wxml文件 -->
<x-title></x-title>

在页面的 wxml

<!-- 父级wxml -->
<x-title titleText="全部订单"></x-title>

<!-- 如果父级的值是一个变量则 -->
<x-title titleText="{{currentTitle}}"></x-title>

Comment transmettre une valeur ?

Le composant parent transmet la valeur au composant enfant

Vous pouvez voir que nous avons écrit le contenu du titre ci-dessus, mais dans la réalité, nous devons absolument transmettre différents contenus de titre en fonction des différents modules, nous avons donc besoin utiliser La valeur transmise entre père et fils.

Le parent transmet la valeur à l'enfant

<!-- 子级js -->
properties: {
        titleText:{
            type:String,
            value:&#39;其他&#39;
        }
    },

L'enfant reçoit la valeur transmise par le parent

<!-- 子级wxml -->
 <view class="title-oper" bindtap="gotoDetail">详情</view>

Le composant enfant transmet la valeur au composant parent

Modifiez légèrement le composant et ajoutez Détails Bouton d'opération. Actuellement, plusieurs modules ont été obtenus via une boucle. Maintenant, je veux que l'enfant transmette l'ID du module actuel au parent en cliquant sur les détails.

Le composant enfant transmet des paramètres au composant parentrrree

<!-- 子级js -->
 gotoDetail(){
    this.triggerEvent(&#39;gotoDetail&#39;,this.data.titleId)
 }

Le composant parent reçoit les paramètres du composant enfantrrreerreee

la méthode pour que le parent appelle le composant enfant

Le composant enfant définit une méthode

<!-- 父级 wxml -->
<x-title titleText="{{item.title}}"
             titleId="{{item.id}}"
             bind:gotoDetail="gotoDetail"></x-title>

Le parent donne d'abord un identifiant au composant enfant

<!-- 父级 js -->
 //通过e.detail获取子组件传过来的参数
gotoDetail(e){ 
    const id = e.detail 
    console.log(&#39;从子组件接收到的id&#39;,id)
  }

Récupérez le composant dans le cycle de vie de la page js, puis enregistrez-le dans notre variable personnalisée titleCom, puis appelez directement le méthode dans le composant enfant

<!-- 父级 js -->
 onReady(){
    this.titleCom = this.selectComponent("#titleCom");
  },
  
triggerChildMethod(){
    this.titleCom.childMethod();
  }

如果this.selectComponent()返回为null

1、检查wxml定义的id和js使用的是否一致；

2、自定义组件是否渲染，例如你使用了wx:if，导致组件还未渲染

传值官网相关文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

在自定义组件中使用插槽（slot）

我们上面在自定义组件中加了【详情】查看的操作按钮，但是有的地方我们可能并不想用文字，想改成图标或者按钮，当某处放置的节点内容不确定时，我们就可以使用插槽来处理。

插槽就相当于在子组件中放一个占位符，这样父组件就可以向子组件填充html了。

单插槽

在子组件加入插槽

<!-- 子级 wxml -->
 <slot></slot>

父级即可在组件内任意填充内容，比如插入一个图标（如果子级没有加slot，及时填充了html也不会被渲染）

<!-- 父级 wxml -->
 <x-title>
 	<view class="oper-wrap">
            <van-icon name="arrow" />
    </view>
 </x-title>

多插槽

先在子组件的js开启一下多slot支持

 <!-- 子级 js -->
 options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },

在子组件加上插槽需要给插槽加上名字

 <!-- 子级 wxml --> 
 <slot name="icon"></slot>
 
  <slot name="oper"></slot>

在父级使用

 <!-- 父级 wxml --> 
 <view class="icon-wrap" slot="icon">
    <van-icon name="orders-o" size="24"/>
 </view>

<view class="oper-wrap"  slot="oper">
   <van-button type="primary" custom-style="{{customStyle}}">更多</van-button>
</view>

注意

问：为什么加了插槽，却没有反应？

虽然我只在【子组件】加了1个插槽，但是因为加上了名字，所以同样需要在【子组件】的js里开启多插槽

 options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },

插槽官网文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

Component的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  //组件所在页面的生命周期
   pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

生命周期官网：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

更多编程相关知识，请访问：编程视频！！

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!