So wenden Sie Komponenten in uniAPP-Komponenten an

Mit dem Aufkommen der Entwicklung mobiler Anwendungen stellen immer mehr Entwickler höhere Anforderungen an die Kompatibilität mit mehreren Plattformen. Als plattformübergreifendes Framework auf Basis von Vue.js bietet uniAPP viele nützliche Komponenten zur Unterstützung der Kompatibilität mit mehreren Plattformen.

In diesem Artikel wird erläutert, wie Komponenten in uniAPP-Komponenten angewendet werden.

1. Verstehen Sie die uniAPP-Komponente

Bevor wir beginnen zu erklären, wie Komponenten angewendet werden, müssen wir zunächst die Grundkonzepte der uniAPP-Komponenten verstehen.

uniAPP-Komponenten beziehen sich auf UI-Elemente, die Ansichten, Stile und logische Funktionen umfassen. Diese Komponenten können problemlos in uniAPP-Anwendungen wiederverwendet werden und sind mit verschiedenen Plattformen kompatibel. Sie können eine uniAPP-Komponente erstellen, indem Sie eine .vue-Datei erstellen.

2. uniAPP-Komponente, die Komponente anwendet

In uniAPP kann eine Komponente eine andere Komponente mithilfe einer Komponentenreferenz anwenden. Das heißt, Sie verwenden die untergeordnete Komponente innerhalb der übergeordneten Komponente. Schauen wir uns die einzelnen Schritte unten an.

1. Erstellen Sie eine Unterkomponente.

Zuerst müssen wir eine Unterkomponente erstellen. Wir können eine Komponente erstellen, indem wir eine neue .vue-Datei im Komponentenordner des Projekts erstellen, wie unten gezeigt:

<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>

Diese Unterkomponente enthält ein Ansichts-Tag und ein Text-Tag und legt einige Basics fest Stil.

2. Referenzieren Sie die untergeordnete Komponente in der übergeordneten Komponente.

Als nächstes müssen wir die untergeordnete Komponente in der übergeordneten Komponente referenzieren. In der .vue-Datei der übergeordneten Komponente müssen wir zuerst die untergeordnete Komponente einführen und sie dann als benutzerdefiniertes Tag im Vorlagenabschnitt verwenden, wie unten gezeigt:

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

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

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

Die hier importierte childComp verweist zu Die untergeordnete Komponente, die wir gerade erstellt haben. Registrieren Sie es in der Komponentenoption, damit in der Vorlage darauf verwiesen werden kann. In der Vorlage verwenden wir direkt das Tag anstelle des