Detaillierte Erläuterung der Verwendung von Vue-Komponenten

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>
 <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 -Element von Vue übergeben werden Attribut, um dies zu erreichen:

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component></component>

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
 <component></component>
</keep-alive>

可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素，诸如

、

、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. 、
和 ，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

 

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS做出哈希表功能


Vue父子组件数据传递方法总结（附代码）

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!