So verwenden Sie Vue.js-Komponenten

Dieses Mal werde ich Ihnen die Methode zur Verwendung von Vue.js -Komponenten vorstellen und welche Vorsichtsmaßnahmen bei der Verwendung von Vue.js-Komponenten gelten. Hier sind praktische Beispiele sehen.

1. Alle Vue-Komponenten sind auch Vue-Instanzen, unterteilt in globale Komponenten und lokale Komponenten. Die Registrierungsmethode ist wie folgt.

2fb1ec095997abb5abb99340125c8b3b
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3dbe41635306b450881218e857817dde0
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    8c69b8c7e69a6890c44e58d7de1f3c9c
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3a95778579e16b0726f139f43cb421b7b2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83aVue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件  template: 'e388a4556c0f65e1904146cc1a846beeA custom component!94b3e26ee717c64999d7867364b1b4a3'})var Child = {
    template: 'e388a4556c0f65e1904146cc1a846beeA child component!94b3e26ee717c64999d7867364b1b4a3'}var app = new Vue({
    el: '#app',    
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})var example = new Vue({
    el:'#example'})2cacc6d41bbb37262a98f745aa00fbf0

Hinweis:

Es gibt Einschränkungen für Eltern-Kind-Elemente wie ff6d136ddc5fdfeffaf53ff6ee95f185, f5d188ed2c074f8b944552db028f98a1, a34de1251f0d9fe1e645927f19a896e8 Elemente können Komponentenvorlagen nicht direkt verwenden und können durch das Attribut is angegeben werden, z. B. aefc3baf03de7c3c7ca7059834a76d2bfd273fcf5bcad3dfdad3c41bd81ad3e5. Es gibt keine derartigen Einschränkungen, wenn Sie eine ZeichenfolgeVorlage (ein Zeichenfolgenliteral, das eingebettete Ausdrücke zulässt) aus einer der folgenden Quellen verwenden:

1) 504a63905e80b0689d69a3a31c4d4555

2) JavaScript Inline-Vorlagenzeichenfolge:

Vue.component('component1',{
    　　　　　　template: &#39;<tr><td>child component</td></tr>&#39;
　　　　});
　　　　Vue.component(&#39;component2&#39;,{
    　　　　　　template: &#39;<table><component1></component1></table>&#39;
　　　　});

3) .vue-Komponente

b. Die Daten in der Komponenteninstanz müssen eine Funktion sein, andernfalls gibt jede Komponenteninstanz einen Verweis auf dasselbe Objekt zurück

2. Verwenden Sie Kombinationen aus übergeordneten und untergeordneten Komponenten

a. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

1) Die erwarteten Daten werden durch Requisiten in der untergeordneten Komponente deklariert.

2) Es handelt sich um einen einseitigen Datenfluss und Unterkomponenten können Requisiten nicht direkt ändern.

　3) Wenn Sie die Überprüfung des Requisitentyps festlegen möchten, können Sie kein String-Array verwenden. Sie sollten Folgendes definieren: 　　

props:{
　　　　　　　　 propA: Number,
　　　　　　　　 propB: [String, Number]
　　　　　　}

　　4) Wenn Sie Nicht-Requisitenattribute hinzufügen möchten, wann Setzen Sie bei Verwendung von Unterkomponenten dieses Attribut auf „true“ im Tag.

b. Untergeordnete Komponenten lösen übergeordnete Komponentenereignisse aus

1) Verwenden Sie $on(eventName) , um auf Ereignisse zu warten, und $emit(eventName,optionalPayload) Trigger-Ereignis.

2) In Kombination mit der definierten leeren Instanz kann auch die Kommunikation zwischen Nicht-Eltern-Kind-Komponenten zugelassen werden.

c. Datenkombination aus übergeordneter und untergeordneter Komponente – unter Verwendung von Slot

1) Legen Sie in der untergeordneten Komponente fest, dass die übergeordnete Komponente Inhalte an den Standard-Slot verteilen oder Slot=" angeben kann. SlotName" .

2) Legen Sie „slot-scope="props"“ in der übergeordneten Komponente fest, um die Eigenschaften des Slot-Tags der Unterkomponente zu erhalten.

3) Es ist zu beachten, dass der Inhalt der Vorlage der übergeordneten Komponente im Bereich der übergeordneten Komponente kompiliert wird; der Inhalt der Vorlage der untergeordneten Komponente wird im Bereich der untergeordneten Komponente kompiliert.

　3. Andere

　a. Komponenten können dynamisch über v-bind:is = „componentObject“ umgeschaltet werden. Um die ausgeschnittene Komponente zwischenzuspeichern, fügen Sie ihr ein übergeordnetes Element 7c9485ff8c3cba5ae9343ed63c2dc3f7 hinzu.

b. Legen Sie ref="xx" in der untergeordneten Komponente fest, und die untergeordnete Komponente kann von child = vm.$refs.xx bedient werden. – Nur eine Notmaßnahme.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie JavaScript-Strings

So implementieren Sie die bidirektionale Datenbindung im WeChat-Applet

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