Méthode d'écriture mixte Vue

Vue mixin est un moyen de réutiliser le code fourni par Vue. Il vous permet de définir un ensemble d'options, puis de partager ces options sur plusieurs composants. L'une des utilisations courantes des mixins Vue consiste à ajouter des propriétés calculées, des méthodes et des données réactives dont les composants ont besoin. Dans cet article, nous présenterons les concepts de base et l'utilisation courante des mixins Vue, et fournirons des exemples pratiques et du code.

1. Concepts de base

Le mix-in Vue est en fait un objet JavaScript, qui peut contenir n'importe quelle option de composant Vue. En règle générale, les mixins définissent certaines propriétés, méthodes et données calculées couramment utilisées, et plusieurs composants peuvent partager ces options.

Lorsque vous appliquez un objet mixin à un composant, les options de l'objet mixin seront fusionnées avec les options du composant. Si le mixin et le composant définissent les mêmes options, les options du composant remplacent les options du mixin.

2. Utilisation de base

Ce qui suit est un exemple de mix-in simple, qui définit une propriété calculée et une méthode :

const myMixin = {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    sayHello() {
      alert("Hello, " + this.fullName + "!")
    }
  }
}

Dans cet objet mix-in, nous définissons une propriété calculée fullName, qui concatène firstName et lastName . Une méthode sayHello est également définie, qui, lorsqu'elle est appelée, fera apparaître une boîte de vœux utilisant fullName.

Maintenant, nous pouvons appliquer cet objet mixin à un composant Vue. Veuillez consulter l'exemple ci-dessous :

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
  // other component options...
})

Dans cette définition de composant, nous mélangeons myMixin dans le composant, puis définissons certaines options de composant, notamment deux options de données firstName et lastName. Puisque nous avons mélangé la propriété calculée fullName et la méthode sayHello dans myMixin, ces deux options seront également disponibles dans le composant.

Maintenant, nous pouvons utiliser ces options dans ce composant :

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

Ce composant calculera le nom complet en fonction du prénom et du nom et l'affichera sur la page. Lorsque nous cliquons sur le bouton "Dire bonjour", la méthode sayHello sera appelée, faisant apparaître une boîte de voeux contenant fullName.

3. Mélange local

Le mélange peut non seulement être appliqué aux composants globaux, mais peut également être mélangé localement au sein des composants. Voici un exemple de mixin global et de mixin local :

const myGlobalMixin = { // 全局混入
  // ...
}

const myLocalMixin = { // 局部混入
  // ...
}

Vue.component('my-component', {
  mixins: [myGlobalMixin, myLocalMixin],
  // ...
})

Dans cet exemple, nous définissons d'abord un mix global dans myGlobalMixin puis le mélangeons dans la définition du composant. Dans le même temps, nous définissons également un mixin local myLocalMixin et le mélangeons dans le composant avec le mixin global. Les mixins locaux ont une priorité plus élevée que les mixins globaux, donc si une option apparaît à la fois dans un mixin local et dans un mixin global, l'option dans le mixin local sera utilisée.

4. Ordre d'exécution du mixage

Lorsque la même option existe dans le mix et dans le composant, la valeur mixte écrasera la valeur d'origine dans le composant. Cependant, l'ordre dans lequel les différents mixins et composants sont définis affecte les options de fusion finales. Normalement, les options d'un mixin seront d'abord fusionnées, puis fusionnées avec les options du composant, mais si le mixin et le composant définissent les mêmes options, les options du composant seront utilisées en premier. Un exemple est le suivant :

const myMixin = {
  data() {
    return {
      message: 'Mixin Message'
    }
  }
}

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

Dans cet exemple, nous définissons un mixin myMixin, dans lequel nous définissons une option de données, qui contient un attribut de message. Ensuite, nous mélangeons myMixin dans le composant my-component et définissons la même option de données dans le composant. Lorsque ce composant est créé, il imprimera "Message du composant". Parce que l'attribut de message défini dans le composant a une priorité plus élevée que l'attribut dans le mixin.

Si vous souhaitez que les options mixin soient conservées dans l'objet mixin et les options du composant, utilisez la fonction Vue.extend() pour créer l'objet mixin. Cela représentera un nouveau constructeur Vue étendu dont les options seront conservées dans toutes les instances de composants. L'exemple est le suivant :

const myMixin = Vue.extend({
  data() {
    return {
      message: 'Mixin Message'
    }
  }
})

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

Dans cet exemple, nous utilisons la fonction Vue.extend() pour créer l'objet mixin myMixin, qui contient une option de données dans laquelle l'attribut de message est défini. Ensuite, nous mélangeons myMixin dans le composant my-component et définissons la même option de données dans ce composant. Lorsque ce composant sera créé, il imprimera "Message Mixin". Parce que les propriétés définies dans le constructeur Vue étendu ont une priorité plus élevée que les propriétés définies dans le composant.

5. Résumé

Vue hybrid est un moyen pratique de réutiliser du code, offrant des options de partage pour plusieurs composants afin d'améliorer la réutilisabilité du code. Les mixins peuvent être utilisés globalement et localement. L'utilisation de mixins dans Vue est l'une des meilleures options pour implémenter rapidement des fonctions et améliorer la réutilisabilité du code. Cependant, vous devez faire attention à la priorité et à l'ordre de fusion des options de mixage pour vous assurer que votre code fonctionne comme prévu. Dans le développement réel, nous pouvons d'abord définir un objet mix-in selon nos besoins, puis le mélanger aux composants qui doivent partager l'objet mix-in, réalisant ainsi la réutilisation du code.

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!