Comment utiliser le composant el dans vue

Dans les composants Vue, l'attribut el est utilisé pour spécifier l'élément racine du composant, qui est le point de montage. Grâce à l'attribut el, le composant peut être rendu vers l'élément spécifié dans le DOM.

Lors du développement avec Vue.js, il existe généralement deux façons de spécifier l'élément racine d'un composant.

La première consiste à utiliser l'attribut el dans l'instance Vue pour spécifier l'élément racine. Cette méthode convient à la création d'instances via new Vue().

L'autre consiste à utiliser l'attribut el à l'intérieur du composant pour spécifier l'élément racine. Cette méthode convient à l'enregistrement de composants via Vue.component().

Regardons d'abord la première méthode. Lors de la création d'une instance Vue, vous pouvez spécifier le point de montage via l'attribut el, par exemple :

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

Cela montera l'instance Vue sur l'élément avec l'application id. Lorsque les données changent, Vue mettra automatiquement à jour les éléments DOM pertinents dans la page.

Dans les composants, puisque chaque composant est indépendant, l'élément racine doit également être spécifié séparément. Ceci peut être réalisé en ajoutant l'attribut el aux options du composant, par exemple :

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

Cela restituera le composant dans l'élément avec l'identifiant composant-conteneur. Il est à noter que les composants étant réutilisables, l'attribut el ne fonctionne que lorsque le composant est utilisé seul. Si le composant est imbriqué dans d'autres composants, l'attribut el du composant parent sera utilisé.

En plus d'utiliser l'attribut el pour le montage, vous pouvez également monter manuellement des composants via la méthode $mount(). Par exemple :

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

Cela montera l'instance Vue sur l'élément avec l'identifiant de l'application. Il convient de noter que si l'attribut el n'est pas spécifié, le composant doit être monté manuellement.

En bref, dans Vue, l'attribut el est utilisé pour spécifier l'élément racine d'un composant. En utilisant rationnellement l'attribut el, le montage et la réutilisation flexibles des composants peuvent être obtenus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!