Zusammenfassung der globalen Vue-Komponenten

Dieses Mal werde ich Ihnen eine Zusammenfassung der globalen Vue-Komponenten geben. Was sind die Vorsichtsmaßnahmen für die Zusammenfassung der globalen Vue-Komponenten? Das Folgende ist ein praktischer Fall.

Datengesteuert und komponentenorientiert sind die beiden wichtigsten Merkmale von vue.js. Die Komponentisierung soll die Wiederverwendung von Code erleichtern und die Entwicklungseffizienz verbessern. Es gibt vier gängige Methoden zum Schreiben von Vue-Komponenten, jede mit ihren eigenen Eigenschaften und für unterschiedliche Szenarien geeignet.

1. Globale Komponente

Struktur:

// 组件的注册 、
Vue.component( 'componentName', { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
// 组件的使用 
new Vue({ 
 el: '#app' 
})

Definieren Sie eine globale Komponente über Vue.component() im Skript Tag-Komponente und wenden Sie die Komponente über die neue Vue()-Instanz auf das Tag mit der ID app in der HTML-Datei an.

Funktionen:

<1> kann direkt im Skript-Tag in der HTML-Datei definiert und verwendet werden; Die durch diese Methode definierten Komponenten sind globale Komponenten und können in jeder Vue-Instanz verwendet werden. Sie eignen sich für relativ einfache Projektszenarien.

<3> definiert. Und die Komponentennamen dürfen nicht identisch sein.

Willkommenskomponente

2. Lokale Komponente

Struktur:

// 构造组件对象 
const componentName = { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
// 组件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

definiert ein Komponentenobjekt im Skript-Tag und registriert die Komponente über das Komponentenattribut in der Vue-Instanz.

Funktionen:

<1> Ähnlich wie global definierte Komponenten können Komponenten direkt im Skript-Tag in der HTML-Datei geschrieben und verwendet werden; 🎜><2> Diese Komponente kann nur in einer registrierten Vue-Instanz verwendet werden

Instanz:

Willkommenskomponente

3. Verwenden Sie das Template-Tag

Struktur:

<template id="componnet"> 
 // 组件的html结构 
</template> 
// 全局组件的注册与使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部组件的注册与使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

Verwenden Sie das Template-Tag, um die HTML-Struktur in die Komponente innerhalb des Body-Tags und in das Skript-Tag zu schreiben Es wird in Form globaler Komponenten und lokaler Komponenten registriert und verwendet. Der Unterschied besteht darin, dass das Vorlagenattribut in der Komponente durch die ID referenziert wird. Funktionen:

<1> Die js-Datei enthält keinen HTML-Strukturinhalt, wodurch eine Trennung von Struktur und Logik erreicht wird Beispiel:

Willkommenskomponente

4. Einzeldateikomponente

Struktur:

<template lang="html"> 
 // 组件中的html结构 
</template> 
<script> 
 //组件的逻辑 
 export default { 
 // 组件的属性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 组件的样式 
</style>

Eine Datei mit dem Suffix vue erstellt, der Dateiname ist der Komponentenname. Die Komponente enthält drei Teile: HTML-Struktur, JS-Logik und CSS-Stil, die verschiedenen Tags entsprechen. Wenn Sie Komponenten verwenden, können Sie diese durch Importieren verwenden.

Funktionen: <1> Komponenten beeinflussen sich nicht gegenseitig und sind hoch wiederverwendbar, und ihre HTML-, CSS- und JS-Dateien können alle wiederverwendet werden >

<2> Die Struktur und Logik der Komponenten ist klar

<3> Geeignet für die Entwicklung durch mehrere Personen; >Beispiel:

Willkommenskomponente! ! ! Dabei ist zu beachten: Das Template-Tag muss alle Tags mit einem Tag umschließen, sonst wird ein Fehler gemeldet

Korrekte Schreibweise:

<template> 
 <p> 
 <p></p> 
 ...... 
 <p></p> 
 </p> 
</template>

Falsche Schreibweise:

<template> 
 <p></p> 
 <p></p> 
 ...... 
 <p></p> 
</template>

Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue2.0-Betrieb aktiv und andere Optionen schließen sich gegenseitig aus

Warum können Daten nicht sein? gespeichert, nachdem die Vuex-Seite aktualisiert wurde? Wird verarbeitet

Das obige ist der detaillierte Inhalt vonZusammenfassung der globalen Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!