Einführung in die Erstellungs- und Registrierungsmethoden von Komponenten in Vue.js

Der Inhalt dieses Artikels ist eine Einführung in die Erstellungs- und Registrierungsmethoden von Komponenten in Vue.js. Ich hoffe, dass er für Freunde hilfreich ist.

Vor der Verwendung erstellen

Erstellen Sie Ihre eigene Komponentendatei (.vue) unter der Komponentendatei

Die anfängliche Struktur ist

<!--html区域-->
<template>
    
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw"
    }
</script>

<!--css区域-->
<style scoped>

</style>

Fügen Sie Ihre eigenen Codeeinstellungen hinzu, um die Erstellung einer einfachen Unterkomponentendatei abzuschließen

<!--html区域-->
<template>
    <p class="hw">
      {{ name }}
    </p>
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw",
      data(){
          return {
            name:"毛没齐"
        }
      }
    }
</script>

<!--css区域-->
<style scoped>
.hw{
  color: blue;
}
</style>

Nachdem die Unterkomponente erstellt wurde, müssen Sie sie registrieren. Erst nachdem sie registriert wurde, kann sie verwendet werden

Registrierungspunkte für

1. Registrieren Sie die Komponente lokal: Registrieren Sie sich in der App.vue-Datei. Verwenden Sie auch
in der App.vue-Datei

2 . Registrieren Sie die Komponente global: In der Datei main.js. Nachdem Sie die Komponente global in

registriert haben, verwenden Sie

in der App .vue-Datei. Verwandte Empfehlungen:

Calendar_html/css_WEB-ITnose erstellt mit Vue.js

Was ist eine Vue.js-Komponente? Zusammenfassung der Vue.js-Komponentennutzung

Das obige ist der detaillierte Inhalt vonEinführung in die Erstellungs- und Registrierungsmethoden von Komponenten in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!