Comment utiliser la méthode de construction dans vue

Vue est un framework JavaScript populaire qui fournit de nombreuses fonctionnalités utiles, notamment des composants Vue. Les composants Vue vous permettent de diviser votre application en parties plus petites et réutilisables. Dans cet article, nous aborderons les bases des composants Vue et comment les utiliser.

Bases des composants Vue

Les composants Vue font partie du framework Vue et sont utilisés pour représenter des parties réutilisables et plus petites d'une application. Les composants peuvent contenir du HTML, du CSS et du JavaScript et peuvent être utilisés plusieurs fois au sein d'une application. Cela rend les composants très utiles lors du développement d'applications volumineuses, car vous pouvez concentrer chaque composant sur sa propre tâche sans avoir à mélanger l'ensemble de l'application.

Pour créer un composant Vue, vous pouvez utiliser la méthode Vue.component(). Cette méthode nécessite deux paramètres, le nom du composant et l'objet options du composant. Les noms de composants doivent être des chaînes minuscules et ne peuvent contenir que des traits d'union, des chiffres et des lettres. L'objet options du composant doit contenir un élément de modèle, qui contient le code HTML du composant.

Voici un exemple simple de composant Vue :

Vue.component('my-component', {
  template: '<div>这是我的组件</div>'
});

Pour utiliser ce composant dans votre application, référencez-le dans votre instance Vue :

new Vue({
  el: '#app',
  template: '<my-component></my-component>'
});

Dans cet exemple, nous ajoutons mon composant au modèle du milieu de l'instance Vue. Désormais, lorsque l'instance Vue sera instanciée, elle affichera ce composant sur la page.

Comment utiliser les composants Vue

Il existe de nombreuses façons d'utiliser les composants Vue. Dans les sections suivantes, nous présenterons quelques méthodes couramment utilisées.

Props

La communication entre les composants est une fonction importante des composants Vue. Lorsque le composant parent doit transmettre des données au composant enfant, vous pouvez utiliser l'attribut props. Cela se fait en définissant un tableau d'accessoires dans le composant enfant.

Voici un exemple de sous-composant montrant comment utiliser les attributs props :

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

new Vue({
  el: '#app',
  data: {
    parentMsg: '来自父亲的消息'
  }
});

Dans cet exemple, nous définissons un attribut props appelé "message" et le référençons dans le modèle du sous-composant. Dans le composant parent, nous définissons un objet de données appelé parentMsg et définissons sa valeur sur « Message du parent ». Maintenant, nous pouvons utiliser le composant enfant dans le composant parent et transmettre le parentMsg comme accessoire :

<div id="app">
  <child-component :message="parentMsg"></child-component>
</div>

Dans cet exemple, nous avons utilisé la directive v-bind pour lier le parentMsg comme propriété de message du composant enfant. Le composant enfant affichera désormais le message du composant parent.

Emit

Emit permet aux composants enfants de transmettre des données aux composants parents. Les composants enfants peuvent utiliser une méthode spéciale $emit, qui déclenche un événement personnalisé sur le composant parent.

Voici un exemple qui montre comment utiliser émettre pour implémenter un composant enfant afin de transmettre des données à un composant parent :

Vue.component('child-component', {
  template: '<button v-on:click="emitEvent">发送事件</button>',
  methods: {
    emitEvent: function() {
      this.$emit('my-event', '这是我的消息');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentMsg: ''
  },
  methods: {
    handleEvent: function(msg) {
      this.parentMsg = msg;
    }
  }
});

Dans cet exemple, le composant enfant contient un bouton qui envoie un événement et est déclenché lorsque l'on clique sur le bouton. en utilisant l'événement 'my-event' de la méthode $emit. Dans le composant parent, nous définissons une méthode appelée handleEvent et la lions à l'événement 'my-event'. Lorsque le composant déclenche cet événement, la méthode handleEvent sera appelée et recevra le message transmis par le composant enfant.

<div id="app">
  <child-component v-on:my-event="handleEvent"></child-component>
  <p>{{ parentMsg }}</p>
</div>

Dans cet exemple, nous lions la méthode handleEvent à l'événement 'my-event' et affichons la valeur de parentMsg sur la page. Désormais, lorsque le composant enfant clique sur le bouton et que l'événement 'my-event' est déclenché, la méthode handleEvent sera appelée et le message transmis par le composant enfant sera stocké dans la variable parentMsg.

Slot

Slot est une autre fonctionnalité importante des composants Vue. Il permet à un composant parent de transmettre du code HTML à un composant enfant et de l'inclure dans le modèle du composant enfant.

Voici un exemple qui montre comment utiliser la fonction Slot pour transmettre du code HTML d'un composant parent à un composant enfant :

Vue.component('child-component', {
  template: '<div><slot></slot></div>'
});

new Vue({
  el: '#app'
});

Dans cet exemple, nous utilisons l'élément Cet élément affichera le code HTML correspondant dans le composant enfant. Maintenant, nous pouvons utiliser la balise dans le composant parent et saisir le code HTML dans la balise :

<div id="app">
  <child-component>
    <h1>这是一级标题</h1>
    <p>这是一段文本</p>
  </child-component>
</div>

Dans cet exemple, le code HTML du composant parent sera inclus dans le modèle du composant enfant et affiché. sur la page.

Scoped Slots

Scoped Slots est une fonctionnalité de slot avancée qui vous permet de transmettre des données aux composants enfants au lieu du code HTML. Ceci est très utile car cela vous permet de réutiliser des composants dans différents contextes.

Voici un exemple qui montre comment utiliser la fonctionnalité Scoped Slots pour implémenter le composant parent transmettant des données aux composants enfants :

Vue.component('child-component', {
  template: '<div><slot v-bind:user="user"></slot></div>',
  data: function() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    getUser: function(name, age) {
      alert(name + ' ' + age);
    }
  }
});

Dans cet exemple, nous utilisons l'élément à cela. Dans le composant parent, nous définissons une méthode appelée getUser et la lions à l'élément