Detaillierte Einführung in die Aufteilung von Komponenten in Vue

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie hat Vue immer mehr Aufmerksamkeit erhalten und ist zu einem der angesehensten Frameworks in der Front-End-Entwicklung geworden. Die Effizienz und die virtuelle DOM-Technologie von Vue ermöglichen einen effektiven Einsatz in der tatsächlichen Entwicklung. Die Abteilung in Vue ist ein sehr wichtiger Teil der Komponentenabteilung von Vue. In diesem Artikel wird detailliert beschrieben, wie Komponenten in Vue unterteilt werden.

1. Das Grundkonzept von Komponenten

In Vue bezieht sich eine Komponente auf eine wiederverwendbare Vue-Instanz, genau wie ein benutzerdefiniertes Element. Komponenten können Requisiten in der Ansicht akzeptieren, um die Funktionalität des Elements anzupassen. Komponenten enthalten Daten und Methoden und können einen Teil der gesamten Ansicht darstellen. Beispielsweise kann eine Warenkorbkomponente einen Teil der gesamten Anwendungsansicht darstellen. Komponenten können Daten von übergeordneten Komponenten empfangen und auch Daten an übergeordnete Komponenten senden.

2. Wie Komponenten unterteilt werden

In Vue können Komponenten in globale Komponenten und lokale Komponenten unterteilt werden.

• Globale Komponenten

Globale Komponenten sind Komponenten, die überall verwendet werden können. Sie werden im globalen Konfigurationsobjekt von Vue registriert. Der Umfang jeder Vue-Instanz enthält globale Komponenten. Die Registrierung dieser Art von Komponente erfolgt über die Methode Vue.component(). Im Allgemeinen werden globale Komponenten nur zum Definieren globaler Funktionen verwendet, z. B. der unteren Navigationsleiste, des oberen Suchfelds und anderer gemeinsamer Komponenten. Der Beispielcode lautet wie folgt:

Vue.component('header-bar', {
  template: '<div>这是一个头部组件</div>'
})

• Lokale Komponenten

Lokale Komponenten sind Komponenten, die nur in einer bestimmten Komponente verwendet werden können. Sie sind bei einer Vue-Instanz oder einer Komponenteninstanz registriert und können nur im Rahmen von verwendet werden die Instanz. Eine solche Komponente wird registriert, indem das Komponentenoptionsobjekt als eine der Optionseigenschaften der lokalen Komponente übergeben wird. Im Allgemeinen können lokale Komponenten für jede Seite ihre eigenen Komponenten definieren. Wenn eine Seite beispielsweise eine bestimmte Komponente erfordert, kann diese als lokale Komponente definiert werden. Der Beispielcode lautet wie folgt:

var vm = new Vue({
  el: '#app',
  components: {
    'header-bar': {
      template: '<div>这是一个头部组件</div>'
    },
    'content-body': {
      template: '<div>这是一个内容组件</div>'
    }
  }
})

3. Wertübertragungsmethoden von Komponenten

Es wird eine Interaktion und Datenübertragung zwischen Komponenten geben. Um Daten effektiv zu übertragen, gibt es in Komponenten mehrere Datenübertragungsmethoden.

• Übergabe von Werten von einer übergeordneten Komponente an eine untergeordnete Komponente

Die Übergabe von Werten von einer übergeordneten Komponente an eine untergeordnete Komponente ist ein einseitiger Datenfluss, der Daten über Requisiten an untergeordnete Komponenten weiterleitet. In Vue deklarieren untergeordnete Komponenten ihre eigenen unabhängigen Requisiten als Eigenschaften. Der Beispielcode lautet wie folgt:

Übergeordnete Komponente:

<template>
  <div>
    <h3>父组件</h3>
    <my-child :title="title" :content="content"></my-child>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '这是标题',
        content: '这是内容'
      }
    }
  }
</script>

Untergeordnete Komponente:

<template>
  <div>
    <h3>子组件</h3>
    <p>{{title}}</p>
    <p>{{content}}</p>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      },
      content: {
        type: String
      }
    }
  }
</script>

• Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente.

Die untergeordnete Komponente übergibt den Wert über ein benutzerdefiniertes Ereignis von an die übergeordnete Komponente die untergeordnete Komponente zur übergeordneten Komponente Einseitiger Datenfluss. Verwenden Sie in Vue die Methode $emit(), um Ereignisse und Daten an die übergeordnete Komponente zu übergeben. Der Beispielcode lautet wie folgt:

Übergeordnete Komponente:

<template>
  <div>
    <h3>父组件</h3>
    <my-child @child-click="childClickHandler"></my-child>
    <p>{{info}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        info: ''
      }
    },
    methods: {
      childClickHandler(val) {
        this.info = val
      }
    }
  }
</script>

Untergeordnete Komponente:

<template>
  <div>
    <h3>子组件</h3>
    <button @click="clickHandler">点击我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      clickHandler() {
        this.$emit('child-click', '这是子组件的信息')
      }
    }
  }
</script>

Zusammenfassung

Die komponentenbasierte Entwicklung in Vue spielt eine sehr gute Rolle bei der Entwicklung, Änderung und Wartung des Projekts. In der tatsächlichen Entwicklung sind eine angemessene Komponentenaufteilung und eine bedarfsgerechte Datenübertragung zwischen Komponenten wirksame Methoden, um eine gute Entwicklungserfahrung und Komponentisierung zu erreichen. Durch die Verwendung von Vue für die Komponentenentwicklung wird die gesamte Anwendung in wiederverwendbare kleine Teile aufgeteilt, wodurch sie effizienter und zuverlässiger wird.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Aufteilung von Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!