Webinterview: Benutzerdefinierte Vue-Komponenten und Aufrufmethoden

// Importiere die anzuzeigende Komponente importiere mymodel from '../components/mymodel.vue'
Standard exportieren {
  installieren: Funktion (Vue) {
    // 1.0 Holen Sie sich den Konstruktor des Mymodel-Komponentenobjekts const Mymodel = Vue.extend(mymodel)
    // Füge allen Vue-Instanzen eine Methode $model hinzu
    Vue.prototype.$model = Funktion () {
      // Um ​​eine Komponente anzuzeigen: mymodel
      // 2.0 Erstellen Sie ein Komponentenobjekt const obj = new Mymodel()
      // 3.0 Komponente anzeigen obj.show = true
      // 4.0 Holen Sie sich die HTML-Struktur des Komponentenobjekts const html = obj.$mount().$el
      // 5.0 Rendern Sie die HTML-Struktur auf der Seite document.body.append(html)
    }
  }
}

<Vorlage>
  <div>
    <h3>Aufruf mit normaler Komponentenmethode</h3>
    <button @click="fn1">Modell anzeigen</button>
    <!-- <meinModell :value="anzeigen" @input="val => (anzeigen = val)"></meinModell> -->
    <meinmodel v-model="show"></meinmodel>
    <!-- sync: Parameter werden an die Komponente übergeben: xxx Von der Komponente empfangenes Ereignis: update:xxx Das Ereignis ändert xxx automatisch -->
    <!-- v-model: Parameter werden an die Komponente übergeben: Wert. Ereignisse werden von der Komponente empfangen: Eingabeereignisse ändern den Wert automatisch -->
    <h3>Anrufen mit js</h3>
    <button @click="fn2">Modell anzeigen</button>
  </div>
</Vorlage>
<Skript>
importiere mymodel aus '../../components/mymodel.vue'
Standard exportieren {
  Daten () {
    zurückkehren {
      anzeigen:false
    }
  },
  Methoden: {
    fn1 () {
      dies.show = wahr
    },
    fn2 () {
      //Zeige die Komponente direkt über die JS-Methode this.$model()
    }
  },
  Komponenten:
    meinModell: meinModell
  }
}
</Skript>

<Stil></Stil>