Comment appliquer des composants dans les composants uniAPP

Avec l'essor du développement d'applications mobiles, de plus en plus de développeurs ont des exigences plus élevées en matière de compatibilité multiplateforme. En tant que framework multiplateforme basé sur Vue.js, uniAPP fournit de nombreux composants utiles pour prendre en charge la compatibilité multiplateforme.

Cet article expliquera comment appliquer des composants dans les composants uniAPP.

1. Comprendre les composants uniAPP

Avant de commencer à expliquer comment appliquer les composants, nous devons d'abord comprendre les concepts de base des composants uniAPP. Les composants

uniAPP font référence à des éléments d'interface utilisateur qui incluent des vues, des styles et des fonctions logiques. Ces composants peuvent être facilement réutilisés dans les applications uniAPP et sont compatibles avec diverses plateformes. Vous pouvez créer un composant uniAPP en créant un fichier .vue.

2. Le composant uniAPP applique le composant

Dans uniAPP, un composant peut appliquer un autre composant en utilisant la référence du composant. Autrement dit, utilisez le composant enfant dans le composant parent. Examinons les étapes spécifiques ci-dessous.

1. Créer un sous-composant

Nous devons d'abord créer un sous-composant. Nous pouvons créer un composant en créant un nouveau fichier .vue dans le dossier des composants du projet, comme indiqué ci-dessous :

<template>
  <view class="child-comp">
    <text>我是一个子组件</text>
  </view>
</template>

<script>
  export default {
    name: 'childComp'
  }
</script>

<style>
  .child-comp {
    background-color: #ddd;
    width: 100px;
    height: 100px;
  }
</style>

Ce sous-composant contient une balise de vue et une balise de texte, et définit quelques styles de base.

2. Référencez le composant enfant dans le composant parent

Ensuite, nous devons référencer le composant enfant dans le composant parent. Dans le fichier .vue du composant parent, nous devons d'abord introduire le composant enfant, puis l'utiliser comme balise personnalisée dans la section modèle, comme indiqué ci-dessous :

<template>
  <view>
    <childComp></childComp>
  </view>
</template>

<script>
  import childComp from '@/components/child-comp.vue'

  export default {
    components: {
      childComp
    },
  }
</script>

Le childComp importé ici fait référence au composant enfant que nous venons de créé. Enregistrez-le dans l'option composants afin qu'il puisse être référencé dans le modèle. Dans le modèle, nous utilisons directement la balise au lieu de la balise