Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Vue-Komponenten und eine detaillierte Erklärung der Vorsichtsmaßnahmen bei der Verwendung von Vue-Komponenten geben. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Komponente ist eine einfache Kapselung von Daten und Methoden. Die Komponente im Web kann tatsächlich als Komponente der Seite betrachtet werden. Sie ist eine Schnittstelle mit unabhängiger Logik und Funktion. Gleichzeitig kann sie gemäß den angegebenen Schnittstellenregeln miteinander integriert werden und wird schließlich zu einer vollständigen Die Seite besteht aus solchen Komponenten wie Navigation, Liste, Popup-Fenster, Dropdown-Menü usw. Die Seite ist nur ein Container für solche Komponenten. Die Komponenten werden frei kombiniert, um eine voll funktionsfähige Schnittstelle zu bilden. Wenn eine Komponente nicht benötigt wird oder Sie eine Komponente ersetzen möchten, können Sie sie jederzeit ersetzen, ohne den Betrieb zu beeinträchtigen die gesamte Anwendung. , Die Kernidee der Front-End-Komponentisierung besteht darin, eine große und komplexe Sache mit angemessener Granularität in kleine Dinge aufzuteilen.
Zur Verbesserung der Entwicklungseffizienz, zur Erleichterung der Wiederverwendung, zur Vereinfachung von Debugging-Schritten, zur Verbesserung der Wartbarkeit des gesamten Projekts und zur Erleichterung der kollaborativen Entwicklung.
Als leichtgewichtiges Front-End-Framework liegt der Kern von Vue in der Komponentenentwicklung.
Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. In einigen Fällen können Komponenten auch als native HTML-Elemente erscheinen, die um das Attribut is erweitert wurden.
In Vue sind Komponenten wiederverwendbare Vue-Instanzen. Da es sich bei Komponenten um wiederverwendbare Vue-Instanzen handelt, erhalten sie dieselben Optionen wie neue Vue-Instanzen, z. B. Daten, Berechnung, Überwachung, Methoden und Lebenszyklus-Hooks. Die einzigen Ausnahmen sind Root-Instanz-spezifische Optionen wie el.
Komponentenregistrierung
Globale Registrierung
Erstellen Sie Komponenten über Vue.component:
Vue.component('my-component-name', {
// ... 选项 ...
})Diese Komponenten sind weltweit registriert. Das heißt, sie können nach der Registrierung in der Vorlage jeder neu erstellten Vue-Root-Instanz (neues Vue) verwendet werden. Zum Beispiel:
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<p id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</p>Das Gleiche gilt für alle Unterkomponenten, was bedeutet, dass diese drei Komponenten sich auch intern gegenseitig nutzen können.
Lokale Registrierung
Eine globale Registrierung ist oft nicht ideal. Wenn Sie beispielsweise ein Build-System wie Webpack verwenden, bedeutet die globale Registrierung aller Komponenten, dass eine Komponente auch dann in Ihrem endgültigen Build-Ergebnis enthalten ist, wenn Sie sie nicht mehr verwenden. Dies führt zu einem unnötigen Anstieg der Menge an JavaScript, die von Benutzern heruntergeladen wird.
In diesen Fällen können Sie die Komponente definieren über ein einfaches JavaScript-Objekt:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }und dann die Komponente, die Sie verwenden möchten, in den Komponentenoptionen definieren:
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})Für jedes Attribut im Komponentenobjekt ist sein Attributname der Name des benutzerdefinierten Elements und sein Attributwert ist das Optionsobjekt dieser Komponente.
Beachten Sie, dass lokal registrierte Komponenten in ihren untergeordneten Komponenten nicht verfügbar sind. Wenn Sie beispielsweise möchten, dass KomponenteA in KomponenteB verfügbar ist, müssen Sie Folgendes schreiben:
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}Verwenden Sie registrierte Komponenten in Babel und Webpack
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}Beachten Sie, dass in ES2015+ Das Einfügen eines Variablennamens wie ComponentA in das Objekt ist eigentlich ComponentA: die Abkürzung von ComponentA, das heißt, dieser Variablenname ist auch:
Der Name des in der Vorlage verwendeten benutzerdefinierten Elements
Enthält die Option von dieser Komponenten-Variablenname
Automatisierte globale Registrierung grundlegender Komponenten
Ich verstehe nicht.
Daten müssen eine Funktion sein
data: {
count: 0
}Die auf diese Weise definierten Variablen in Daten sind globale Variablen. Wenn Sie Komponenten verwenden, wirkt sich die Änderung des Werts der Variablen in einer Komponente auf den Wert in allen Komponenten aus . Der Wert der Variablen. Um Variableninterferenzen zu vermeiden, muss die Datenoption einer Komponente eine Funktion sein, damit jede Instanz eine unabhängige Kopie des zurückgegebenen Objekts verwalten kann:
data: function () {
return {
count: 0
}
}Dynamische Komponenten
Das ist es Sehr nützlich, um dynamisch zwischen verschiedenen Komponenten zu wechseln, beispielsweise in einer Benutzeroberfläche mit mehreren Registerkarten:
Der oben genannte Inhalt kann über das
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>
你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/
dom标签内使用组件
有些 HTML 元素，诸如