Erste Schritte mit der VUE3-Entwicklung: dynamisches Laden und Registrieren mithilfe von Komponenten

VUE3 ist derzeit eines der beliebtesten Front-End-Frameworks. Es hat aufgrund seiner Benutzerfreundlichkeit, Flexibilität, Leistungsoptimierung und anderen Vorteilen immer mehr Entwickler angezogen. In VUE3 ist die Verwendung von Komponenten ein sehr häufiger Vorgang. Da große Projekte jedoch möglicherweise ein dynamisches Laden und Registrieren von Komponenten erfordern, stellen wir in diesem Artikel vor, wie Komponenten zum dynamischen Laden und Registrieren verwendet werden.

Zuerst müssen wir verstehen, wie Komponenten in VUE3 registriert werden. In VUE3 können Komponenten mithilfe von Objektliteralen oder mithilfe der Vue.createApp-Methode registriert werden. Das Folgende ist ein einfaches Beispiel einer benutzerdefinierten Komponente:

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

Diese Komponente empfängt eine Eigenschaft namens „message“, die vom Typ „String“ sein muss, andernfalls wird ein Fehler gemeldet. Schauen wir uns nun an, wie Komponenten dynamisch geladen und registriert werden.

Dynamisches Laden von Komponenten

Dynamisches Laden von Komponenten bedeutet, dass die Komponente beim Ausführen der Anwendung nur dann dynamisch geladen wird, wenn sie wirklich benötigt wird. Dadurch können Sie die Leistung und Reaktionsfähigkeit Ihrer Anwendung verbessern.

VUE3 bietet die Funktion asynchroner Komponenten. Komponenten können als asynchrone Komponenten definiert und dann bei Bedarf geladen werden. Hier ist ein Beispiel einer asynchronen Komponente:

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

Wenn wir eine asynchrone Komponente verwenden, müssen wir die Komponente als asynchrone Funktion definieren. In dieser Funktion können wir import() verwenden, um die Komponente asynchron zu laden und die Komponente nach Abschluss des Ladevorgangs zurückzugeben.

Das Folgende ist ein vollständigeres Beispiel für die Registrierung asynchroner Komponenten:

<template>
  <div>
    <h1>Welcome to my app!</h1>
    <async-component :message="message" />
  </div>
</template>

<script>
  const AsyncComponent = () => ({
    // 加载异步组件
    component: import('./AsyncComponent.vue'),
    // 显示加载中
    loading: LoadingComponent,
    // 显示加载错误
    error: ErrorComponent,
    // 展示组件
    delay: 200,
    // 如果组件定义了名字，则可以直接使用这个字面量
    // name: 'my-component-name'
  })

  export default {
    components: {
      AsyncComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

In diesem Beispiel verwenden wir die dynamische Lademethode für asynchrone Vue-Komponenten, definieren zunächst eine asynchrone Komponente und verwenden dann deren Methode, um sie in der Vorlage zu rendern. Da AsyncComponent nur eine Funktion ist, müssen wir die Komponente nicht laden, wenn die Komponente initialisiert wird. Sie wird bei Bedarf automatisch geladen.

Bei der Definition von AsyncComponent können wir eine Funktion mit dem Rückgabewert Promise als Komponenteneigenschaft der Komponente angeben, um die Komponente asynchron zu laden. Wenn für Ihre Komponente einige vorinstallierte Komponenten erforderlich sind, können Sie die Namen dieser Komponenten mithilfe der Lade- und Fehleroptionen angeben. Nachdem die Komponente erfolgreich geladen wurde, können wir mit der Verzögerungsoption eine Verzögerung angeben, bevor die eigentliche Komponente gerendert wird.

Komponentenregistrierung

In VUE3 können wir Komponenten mithilfe einer globalen oder lokalen Registrierung registrieren. Der Unterschied zwischen beiden besteht darin, ob die Komponente als global registriert ist oder auf die übergeordnete Komponente dieser Komponente beschränkt ist.

Mit der globalen Registrierung können Sie Komponenten in der gesamten Anwendung verwenden, während die lokale Registrierung nur zwischen übergeordneten und untergeordneten Komponenten verwendet werden kann. Das Folgende ist ein Beispiel für global registrierte Komponenten und lokal registrierte Komponenten:

Global registrierte Komponenten

Die Möglichkeit, eine Komponente global zu registrieren, besteht darin, die Komponente in die Komponentenoption des Vue-Objekts einzuhängen. Hier ist ein Beispiel für eine global registrierte Komponente Komponente:

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

In diesem Beispiel importieren wir die MyComponent-Komponente, platzieren sie in der Components-Option der Vue-Instanz und verwenden dann my-component in der Vorlage, um sie anzuzeigen.

Teilweise registrierte Komponenten

Teilweise registrierte Komponenten können nur in der aktuellen Komponente und ihren Unterkomponenten verwendet werden. Hier ist ein Beispiel für die lokale Registrierung einer Komponente:

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      'my-component': MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

In diesem Beispiel registrieren wir MyComponent als lokale Komponente der aktuellen Komponente. Wir setzen den Komponentennamen in der Komponenteneigenschaft auf „my-component“ und übergeben dann die Komponenteninstanz als Wert.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man Komponenten in VUE3 verwendet, um Komponenten dynamisch zu laden und zu registrieren. Dies erreichen wir durch den Einsatz asynchroner Komponenten und die Registrierung globaler und lokaler Komponenten. Durch diese Technologien können wir in VUE3 eine bessere Leistung und Flexibilität erreichen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit der VUE3-Entwicklung: dynamisches Laden und Registrieren mithilfe von Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!