Komponentenregistrierung
Auf dieser Seite wird davon ausgegangen, dass Sie Komponentengrundlagen gelesen haben. Wenn Sie noch nicht viel über Komponenten wissen, empfehle ich Ihnen, es zuerst zu lesen.
Inhaltsverzeichnis
Komponentenname
Registrieren einer Komponente, Wir müssen ihm immer einen Namen geben. Wir haben es zum Beispiel bei der globalen Registrierung gesehen:
Vue.component('my-component-name', { /* ... */ })Der Komponentenname ist der erste Parameter von Vue.component.
Der Name, den Sie Ihrer Komponente geben, hängt möglicherweise davon ab, wofür Sie sie verwenden möchten. Wenn Sie eine Komponente direkt im DOM verwenden (und nicht in einer Zeichenfolgenvorlage oder Einzeldateikomponente), empfehlen wir dringend, die W3C-Spezifikation für benutzerdefinierte Komponentennamen zu befolgen (alle Buchstaben müssen in Kleinbuchstaben geschrieben werden). einen Bindestrich enthalten). Dies hilft Ihnen, Konflikte mit aktuellen und zukünftigen HTML-Elementen zu vermeiden.
Weitere Vorschläge für Komponentennamen finden Sie im Style Guide.
Groß-/Kleinschreibung des Komponentennamens
Es gibt zwei Möglichkeiten, einen Komponentennamen zu definieren:
Verwenden kebab-case
Vue.component('my-component-name', { /* ... */ })Wenn Sie eine Komponente mit kebab-case (durch Bindestriche getrennte Namen) definieren, müssen Sie kebab-case auch verwenden, wenn Sie auf das benutzerdefinierte Element verweisen, z. B. <my-component-name>.
Verwenden Sie PascalCase
Vue.component('MyComponentName', { /* ... */ })Wenn Sie eine Komponente mit PascalCase definieren (Benennung in Großbuchstaben), können Sie beim Verweisen auf das benutzerdefinierte Element eine der beiden Nomenklaturen verwenden. Das bedeutet, dass sowohl <my-component-name> als auch <MyComponentName> akzeptabel sind. Beachten Sie jedoch, dass nur kebab-case gültig ist, wenn es direkt im DOM verwendet wird (d. h. Nicht-String-Vorlagen).
Globale Registrierung
Bisher haben wir Vue.component nur zum Erstellen von Komponenten verwendet:
Vue.component('my-component-name', {
// ... 选项 ...
}) Diese Komponenten sind weltweit registriert. Das bedeutet, dass sie nach der Registrierung im Template jeder neu erstellten Vue-Root-Instanz (new Vue) verwendet werden können. Zum Beispiel:
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })<div id="app"> <component-a></component-a> <component-b></component-b> <component-c></component-c> </div>
Das Gleiche gilt für alle Unterkomponenten, das heißt, diese drei Komponenten können sich auch intern gegenseitig nutzen.
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 über ein einfaches JavaScript-Objekt definieren:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ } und dann die Komponente, die Sie verwenden möchten, in der Option components definieren:
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})Für jedes Attribut im components-Objekt ist sein Attributname der Name des benutzerdefinierten Elements und sein Attributwert ist das Optionsobjekt dieser Komponente.
Hinweis: Teilweise registrierte Komponenten sind nicht verfügbar in ihren untergeordneten Komponenten. Wenn Sie beispielsweise möchten, dass ComponentA innerhalb von ComponentB verfügbar ist, schreiben Sie:
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}. Wenn Sie ES2015-Module über Babel und Webpack verwenden, sieht der Code eher wie folgt aus:
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
} Beachten Sie, dass in ES2015 das Einfügen eines Variablennamens wie ComponentA in ein Objekt tatsächlich zulässig ist ComponentA: ComponentA Die Abkürzung für diesen Variablennamen lautet auch:
Der Name des in der Vorlage verwendeten benutzerdefinierten Elements
enthält diese Komponente Variablennamen für Optionen
Modulsystem
Wenn Sie fehlgeschlagen import/require Wenn Sie ein Modulsystem verwenden, überspringen Sie dieses Kapitel vielleicht vorerst. Wenn Sie es verwenden, stellen wir Ihnen einige besondere Anweisungen und Vorsichtsmaßnahmen zur Verfügung.
Lokale Anmeldung im Modulsystem
Wenn Sie noch lesen, bedeutet das Sie haben Modulsysteme wie Babel und Webpack verwendet. In diesen Fällen empfehlen wir, ein components-Verzeichnis zu erstellen und jede Komponente in einer eigenen Datei abzulegen.
Dann müssen Sie jede Komponente, die Sie verwenden möchten, importieren, bevor Sie sie lokal registrieren. Zum Beispiel in einer hypothetischen ComponentB.js- oder ComponentB.vue-Datei:
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
} Jetzt können sowohl ComponentA als auch ComponentC in der Vorlage von ComponentB verwendet werden.
Automatisierte globale Registrierung grundlegender Komponenten
Vielleicht umschließen viele Ihrer Komponenten einfach Elemente wie Eingabefelder oder Schaltflächen, die relativ universell sind. Wir nennen sie manchmal Grundkomponenten und sie werden häufig in verschiedenen Komponenten verwendet.
So viele Komponenten werden eine lange Liste von Grundkomponenten haben:
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}, aber nur für einen kleinen Teil der Vorlage:
<BaseInput v-model="searchText" @keydown.enter="search" /> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton>
Glücklicherweise, wenn Sie Webpack verwenden (oder Vue CLI 3 , das Webpack intern verwendet), dann können Sie require.context verwenden Nur diese sehr häufig vorkommenden Grundkomponenten sind weltweit registriert. Hier ist ein Beispielcode, mit dem Sie grundlegende Komponenten in der Anwendungseintragsdatei (z. B. src/main.js) global importieren können:
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})Denken Sie daran Global registrierte Verhaltensweisen müssen sich in der Root-Vue-Instanz befinden (über new Vue ) tritt auf, bevor erstellt wird. Hier ist ein Beispiel für ein reales Projektszenario.
