Une brève introduction et un exemple d'analyse de l'enregistrement global et de l'enregistrement local dans les composants vue.js

Ce que cet article vous apporte est une brève introduction et un exemple d'analyse de l'enregistrement global et de l'enregistrement local dans les composants vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. . aide.

1. Instance d'enregistrement globale (ce qui suit est le code selon l'exemple sur le site officiel)

  <div id="app">
     <com-btn></com-btn>
     <com-btn></com-btn>
 </div>

<script>
        Vue.component(&#39;com-btn&#39;,{
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click=&#39;change&#39;>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        })
       var vm = new Vue({
           el:&#39;#app&#39;,
           data:{

           },
           
       })
    </script>

Lorsque nous enregistrons un composant, nous devons lui donner un nom tel que com-btn. À partir du code ci-dessus, nous pouvons voir que le nom du composant

Vue.component('my-component-name', { /* ... */ })

est le premier paramètre du composant com-btn que nous avons enregistré. Ce composant est globalement enregistré. enregistré, nous pouvons utiliser à l'intérieur de n'importe quelle instance racine de vue nouvellement créée (nouvelle Vue).

Il est à noter que tous les composants doivent être écrits devant l'instance racine pour prendre effet

2 Instances d'ancêtres locaux

<script>
        var childcom ={
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click=&#39;change&#39;>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        }
       var vm = new Vue({
           el:&#39;#app&#39;,
           data:{

           },
           components:{
               &#39;com-btn&#39;:childcom,//调用这个组件
           }
       })
    </script>

L'avantage du local. L'enregistrement est que lorsque vous utilisez un système de construction tel que Webpack, si vous enregistrez un composant à l'aide de l'enregistrement global, lorsque vous n'utilisez pas un certain composant, il existera toujours dans le résultat final de la construction, ce qui augmente le téléchargement inutile de js.

Nous pouvons donc enregistrer le composant via un simple objet js

var ComponentA = { /* ... */ }

Lorsque vous avez besoin d'utiliser ce composant, il vous suffit d'appeler cette définition dans votre instance racine. Les composants suffisent.

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Il convient de noter que le nom de l'attribut de l'instance racine est composants. N'oubliez pas s. Les autres propriétés du composant sont les mêmes que celles de l'instance mais les données doivent être une fonction.

Pour chaque attribut de l'objet composants, il s'agit du nom du composant personnalisé et la valeur de l'attribut est l'objet option de ce composant.

Les composants partiellement enregistrés ne sont pas disponibles dans leurs sous-composants. Si vous souhaitez que le composantA soit disponible dans le composantB, vous devez l'écrire comme ceci :

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

Recommandations associées :

Explication détaillée de l'utilisation de l'enregistrement global et de l'enregistrement local de vue

Formulaire d'inscription du composant vue

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!