Apprenons ensemble le mixin de Vue

Avant-propos

Si vous constatez que la logique de plusieurs composants est presque similaire lors de l'écriture d'un composant vue, vous pouvez alors utiliser le mixin de vue pour extraire la logique similaire et l'encapsuler dans js, ​​puis l'introduire dans chaque utilisation de composant.

mixin est utilisé pour résoudre le problème de la réutilisation logique des composants de vue. Aujourd'hui, nous allons apprendre le mixin de Vue.

mixin

mixin est principalement destiné à la réutilisation de la logique js de vue, il s'agit donc généralement d'un fichier js.

Utilisation

Jetons d'abord un coup d'œil à son utilisation

// name.js
export default {
  data () {
    return {
      name: 'mixin的name',
      obj: {name:'mixin', value:'mixin'}
    }
  },
  methods: {
    getName () {
      console.log('我是mixin,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是mixin的mounted')
    this.getName()
  }
}

Son utilisation est la même que celle du composant vue. Par exemple, des fonctions de hook, des méthodes, des données, etc.

Ensuite, utilisez-le dans le composant et introduisez-le via l'option mixins. mixins选项即可引入。

import name from './name.js'
export default {
  mixins: [name],
  data () {
  }
}

那么就会有一个问题，那么如果组件内也定义了同样的钩子函数，同名方法，同名数据，该以谁的为准？是覆盖还是合并？

通过例子来看看

import name from './name.js'
export default {
  mixins: [name],
  data () {
    name: '组件的name',
    obj: {name:'component'}
  },
  methods: {
    getName () {
      console.log('我是组件,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是组件的mounted')
    this.getName()
  }
}

打印的结果如下：

通过以上结果可以得到，

钩子函数会合并起来，都会执行。先执行mixins的钩子函数再执行组件的钩子函数。

data的同名数据，要分情况讨论

如果是基本类型，会用组件的同名数据覆盖mixin的数据。

但是如果是对象，会递归对比key，如果是同名key则会覆盖，如果不是同名的，则保留。

methods的方法也是一样，会用组件的方法覆盖mixin的同名方法。

除了上面这些选项，还有比如components（组件），和directivesrrreee Ensuite, il y aura une question, si la même fonction de hook, la même méthode du même nom et les mêmes données du même nom sont également définies dans le composant, laquelle doit prévaloir ? Écraser ou fusionner ?

Voyons à travers un exemple

rrreee

Le résultat imprimé est le suivant :

Vous pouvez l'obtenir à partir des résultats ci-dessus

Les fonctions Hook seront fusionnées et exécutées.

Exécutez d'abord la fonction hook des mixins, puis exécutez la fonction hook du composant.
Les données portant le même nom de données doivent être discutées au cas par cas.

🎜S'il s'agit d'un type basique, les données du mixin seront écrasées par les données du même nom du composant. 🎜🎜Mais s'il s'agit d'un objet, il comparera 🎜récursivement🎜 la clé. Si c'est une clé du même nom, elle sera écrasée. Si ce n'est pas le même nom, elle sera conservée. Il en va de même pour les méthodes 🎜🎜, qui écraseront la méthode du mixin du même nom par la méthode du composant. 🎜🎜En plus des options ci-dessus, il existe également des components (composants) et des directives (instructions), qui ont la même logique. Ceux qui portent le même nom seront écrasés. , et ceux des 🎜composants🎜 en priorité. 🎜🎜Inconvénients du mixin🎜🎜Je pense que l'inconvénient du processus que j'utilise mixin est que les noms de variables sont difficiles à trouver et il n'est pas facile de penser qu'ils sont définis dans mixin. 🎜🎜Il apparaîtra donc : ce nom de variable est-il indéfini ? Pourquoi puis-je trouver uniquement l'endroit où il est utilisé, mais pas l'endroit où il est défini ? 🎜🎜Je m'en suis finalement rendu compte après avoir découvert l'utilisation du mixin. 🎜🎜Apprentissage recommandé : "🎜tutoriel vidéo vue🎜"🎜🎜

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!