Introduction aux méthodes de création et d'enregistrement de composants dans Vue.js

Le contenu de cet article est une introduction aux méthodes de création et d'enregistrement de composants dans Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Créer avant utilisation

Créez votre propre fichier de composant (.vue) sous le fichier de composants

La structure initiale est

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

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

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

</style>

Ajoutez vos propres paramètres de code pour terminer la création d'un fichier de sous-composant simple

<!--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>

Une fois le sous-composant créé, vous devez l'enregistrer Ce n'est qu'après l'enregistrement qu'il peut l'être. utilisé

L'inscription est divisée en

1. Composant d'enregistrement local : inscrivez-vous dans le fichier App.Vue et utilisez également

2. Composant d'enregistrement global dans le fichier App.Vue. Après avoir enregistré le composant globalement dans le fichier main.js, utilisez

dans le fichier App.vue. Recommandations associées :

Calendar_html/css_WEB-ITnose créé avec Vue.js

Qu'est-ce qu'un composant Vue.js ? Résumé de l'utilisation du composant Vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!