Eine kurze Einführung und Beispielanalyse der globalen Registrierung und lokalen Registrierung in vue.js-Komponenten

Dieser Artikel bietet Ihnen eine kurze Einführung und Beispielanalyse der globalen Registrierung und der lokalen Registrierung in vue.js. Ich hoffe, dass er für Sie hilfreich ist . helfen.

1. Globale Registrierungsinstanz (das Folgende ist der Code gemäß dem Beispiel auf der offiziellen Website)

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

Bei der Registrierung einer Komponente müssen wir ihr einen Namen geben, z. B. com-btn . Aus dem obigen Code können wir ersehen, dass der Komponentenname

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

der erste Parameter der von uns registrierten Komponente com-btn ist. Nachdem sie registriert wurde, können wir sie in jedem verwenden neu erstellte Vue-Root-Instanz (neues Vue) im Inneren.

Es ist zu beachten, dass alle Komponenten vor der Root-Instanz geschrieben werden müssen, um wirksam zu werden.

2 Instanzen lokaler Vorfahren

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

Der Vorteil der lokalen Registrierung ist Wenn Sie in einem Build-System wie Webpack eine Komponente mithilfe der globalen Registrierung registrieren, ist sie im endgültigen Build-Ergebnis weiterhin vorhanden, wenn Sie sie nicht verwenden, was zu unnötigen JS-Downloads führt.

Damit wir die Komponente über ein einfaches js-Objekt registrieren können

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

Wenn Sie diese Komponente verwenden müssen, müssen Sie nur diese definierte Komponente in Ihrer Root-Instanz aufrufen.

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

Es ist erwähnenswert, dass der Attributname der Stamminstanz „components“ lautet. Vergessen Sie nicht s. Die anderen Eigenschaften in der Komponente sind mit denen der Instanz identisch, die Daten müssen jedoch eine Funktion sein.

Für jedes Attribut im Komponentenobjekt ist es der Name der benutzerdefinierten Komponente und der Attributwert ist das Optionsobjekt dieser Komponente.

Teilweise registrierte Komponenten sind in ihren Unterkomponenten nicht verfügbar. Wenn Sie möchten, dass KomponenteA in KomponenteB verfügbar ist, müssen Sie es wie folgt schreiben:

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

Verwandte Empfehlungen:

Detaillierte Erläuterung der globalen und lokalen Vue-Registrierung

Vue-Komponenten-Registrierungsformular

Das obige ist der detaillierte Inhalt vonEine kurze Einführung und Beispielanalyse der globalen Registrierung und lokalen Registrierung in vue.js-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!