So verwenden Sie el in der Vue-Komponente

In Vue-Komponenten wird das el-Attribut verwendet, um das Stammelement der Komponente anzugeben, das den Einhängepunkt darstellt. Über das el-Attribut kann die Komponente in das angegebene Element im DOM gerendert werden.

Bei der Entwicklung mit Vue.js gibt es normalerweise zwei Möglichkeiten, das Stammelement einer Komponente anzugeben.

Eine besteht darin, das el-Attribut in der Vue-Instanz zu verwenden, um das Stammelement anzugeben. Diese Methode eignet sich zum Erstellen von Instanzen über new Vue().

Die andere besteht darin, das el-Attribut innerhalb der Komponente zu verwenden, um das Stammelement anzugeben. Diese Methode eignet sich zum Registrieren von Komponenten über Vue.component().

Sehen wir uns zunächst die erste Methode an. Beim Erstellen einer Vue-Instanz können Sie den Mount-Punkt über das el-Attribut angeben, zum Beispiel:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Dadurch wird die Vue-Instanz mit der ID-App an das Element gemountet. Wenn sich die Daten ändern, aktualisiert Vue automatisch die relevanten DOM-Elemente auf der Seite.

Da bei Komponenten jede Komponente unabhängig ist, muss das Stammelement auch separat angegeben werden. Dies kann erreicht werden, indem das el-Attribut zu den Komponentenoptionen hinzugefügt wird, zum Beispiel:

Vue.component('my-component', {
  template: '<p>{{ message }}</p>',
  data: function () {
    return {
      message: 'Hello Vue.js from component!'
    }
  },
  el: '#component-container'
})

Dadurch wird die Komponente zum Element mit der ID Component-Container gerendert. Da Komponenten wiederverwendbar sind, ist zu beachten, dass das el-Attribut nur funktioniert, wenn die Komponente alleine verwendet wird. Wenn die Komponente in anderen Komponenten verschachtelt ist, wird das el-Attribut der übergeordneten Komponente verwendet.

Zusätzlich zur Verwendung des el-Attributs zum Mounten können Sie Komponenten auch manuell über die Methode $mount() mounten. Zum Beispiel:

var vm = new Vue({
  template: '<p>{{ message }}</p>',
  data: {
    message: 'Hello Vue.js!'
  }
})
vm.$mount('#app')

Dadurch wird die Vue-Instanz an das Element mit der ID app gemountet. Es ist zu beachten, dass die Komponente manuell gemountet werden muss, wenn das el-Attribut nicht angegeben ist.

Kurz gesagt, in Vue wird das el-Attribut verwendet, um das Stammelement einer Komponente anzugeben. Durch die rationelle Verwendung des el-Attributs kann eine flexible Montage und Wiederverwendung von Komponenten erreicht werden.

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