Detaillierte Erklärung zur Verwendung der Vue.js-Renderfunktion

<div id="div1">
    <child :level="1">Hallo Welt!</child>
</div>

<script Typ="text/x-template" id="child-template">
  <h1 v-if="Ebene === 1">
    <Steckplatz></Steckplatz>
  </h1>
  <h2 v-if="Ebene === 2">
    <Steckplatz></Steckplatz>
  </h2>
  <h3 v-if="Ebene === 3">
    <Steckplatz></Steckplatz>
  </h3>
  <h4 v-if="Ebene === 4">
    <Steckplatz></Steckplatz>
  </h4>
  <h5 v-if="Ebene === 5">
    <Steckplatz></Steckplatz>
  </h5>
  <h6 v-if="Ebene === 6">
    <Steckplatz></Steckplatz>
  </h6>
</Skript>

<Skripttyp="text/javascript">
    /**
     * Registrieren Sie die untergeordnete Komponente global. Beachten Sie, dass, wenn der Vorlagenwert mit # beginnt, dieser als Optionssymbol verwendet wird und das innerHTML des übereinstimmenden Elements als Vorlage verwendet wird. Ein gängiger Trick besteht darin, <script type="x-template"> zu verwenden, um die Vorlage einzubinden. Der Vorteil dabei ist, dass das HTML den Inhalt darin nicht rendert* 
     * Die Verwendung einer Vorlage ist hier nicht die beste Wahl:
     * 1. Der Code ist lang. * 2. Das Einfügen von Inhalten in verschiedene Titel erfordert die wiederholte Verwendung von Slots. 
     * 3. Da Komponenten ein Stammelement haben müssen, werden Titel und Inhalt in ein nutzloses div eingeschlossen, z. B. <div><h1>Hallo Welt</h1></div>
     */

    Vue.Komponente('Kind', {
      Vorlage: '#child-template',
      Requisiten: {
        Ebene:
          Typ: Nummer,
          erforderlich: true
        }
      },
      Daten: Funktion() {
        zurückkehren {
          ein: 1
        }
      }
    })

    neuer Vue({
        el:"#div1"
    })
  </Skript>

<div id="div1">
    <Kind :level="1">
        Hallo Welt!
    </child>
    <Kind: Ebene = "2">
        <!-- wird nicht angezeigt -->
        <span slot="footer">Dies ist der Footer-Slot</span>
        <p slot="header">das ist der Header-Slot</p>
    </child>
</div>


<Skript>
    Vue.Komponente('Kind', {
        rendern: Funktion (ErstelleElement) {
            Konsole.log(diese.$slots);
            returniere Element erstellen(
                'h' + diese.Ebene, // tagName Tagname {
                    // Für jedes h-Tag die Klasse festlegen
                    'Klasse': {
                        foo: wahr,
                        Balken: falsch
                    },
                    //Endlich als Inline-Style gerendert style: {
                        Farbe: 'rot',
                        Schriftgröße: '14px'
                    },
                    // Andere HTML-Attribute attrs: {
                        ID: "foo",
                        'Daten-ID': 'Balken'
                    },
                    // DOM-Attribute domProps: {
                        // innerHTML: 'von domProps',
                    },
                    // Ereignis-Listener basierend auf „on“
                    // Unterstützt daher keine Modifikatoren wie v-on:keyup.enter on: { mehr.
                        Klicken Sie auf: this.clickHandler
                    },
                    // ...
                },
                // Sie können den statischen Inhalt in der VNodes-Liste von this.$slots abrufen // $slots.default wird verwendet, um auf den unbenannten Slot der Komponente zuzugreifen
                // Wenn Sie einen benannten Slot benötigen, müssen Sie den Slot-Namen angeben: this.$slots.header
                // [this.$slots.default,this.$slots.footer,this.$slots.header] //Slots der Ebene 2 anzeigen [this.$slots.default] //Nur unbenannte Slots anzeigen
            )
        },
        Vorlage: '<div v-if="level===1"><slot></slot></div>', // wird ignoriert. Eigenschaften: {
            Ebene:
                Typ: Nummer,
                erforderlich: true
            }
        },
        Methoden: {
            clickHandler: Funktion () {
                console.log('KlickHandler')
            }
        }
    })

    neuer Vue({
        el: "#div1"
    })
</Skript>