Quelle est la différence entre mixin et composant dans vue

La différence entre un mixin et un composant : une fois le composant référencé, cela équivaut à ouvrir un espace séparé dans le composant parent pour effectuer les opérations correspondantes basées sur les valeurs des accessoires du composant parent. , les deux sont toujours distincts et relativement indépendants ;Et Une fois le composant introduit, les mixins sont équivalents à diverses méthodes d'attributs du composant parent qui ont été développées, ainsi qu'au contenu interne du composant, tel que les données et autres méthodes, méthodes et d'autres attributs, seront fusionnés avec le contenu correspondant du composant parent.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Qu'est-ce que Mixin ?

Les Mixins sont un moyen très flexible de distribuer des fonctionnalités réutilisables dans les composants Vue.

Les objets mixtes peuvent contenir des options de composants arbitraires.

Lorsqu'un composant utilise un objet mixin, toutes les options de l'objet mixin seront mélangées aux options du composant lui-même. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

La différence entre le mixin et les composants

Une fois le composant référencé, cela équivaut à ouvrir un espace séparé dans le parent composant pour l'utiliser en fonction du composant parent. Les valeurs transmises via les accessoires sont exploitées en conséquence. Essentiellement, les deux sont toujours distincts et relativement indépendants.

Et les mixins, après avoir introduit le composant, fusionnent le contenu interne du composant tel que les données et autres méthodes, méthodes et autres attributs avec le contenu correspondant du composant parent. Cela équivaut à cela après l'introduction, diverses méthodes d'attributs du composant parent ont été développées.

Référence du composant simple :

• Composant parent + composant enfant>>> Composant parent + composant enfant

mixins :

• Composant parent + composant enfant>>>

C'est un peu comme enregistrer une méthode publique de vue, qui peut être liée à plusieurs composants ou à plusieurs instances d'objet Vue. Un autre point est similaire à l'enregistrement de méthodes dans des objets prototypes. Dans les objets d'instance, c'est-à-dire les composants ou les objets d'instance Vue, vous pouvez toujours définir des méthodes avec le même nom de fonction pour les remplacer, un peu comme une sous-classe et une classe parent.

La différence entre les mixins et vuexMixins : Vous pouvez définir des variables partagées et les utiliser dans chaque composant. Après avoir été introduite dans le composant, chaque variable est indépendante les unes des autres, et la modification de la valeur se fera. ne s'affectent pas dans le composant. Si l'objet est le même, le composant écrasera les mixins

vuex : utilisé pour la gestion de l'état. Les variables qui y sont définies peuvent être utilisées et modifiées dans chaque composant. Après avoir modifié la valeur de cette variable dans n'importe quel composant, cette variable dans un autre. composants La valeur sera également modifiée en conséquence.

Utilisation de mixins
1. Créez d'abord un fichier js, tel que elTableAdsorbent.js

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 显示页面中所有内容
    handleCount() {
      this.count++
  }
}

ou

// 定义一个混入对象
    var myMixin = {
        data(){
            return{
                parent: 405
            }
        },
        mounted: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log(this.parent, 'hello from mixin!')
            }
        }
    }

2. Ensuite, introduisez-le dans la page de vue qui a besoin de cette exigence et utilisez

<el-button type="primary" @click="handleCount">{{count}}</el-button>
 
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
 
export default {
  mixins: [elTableAdsorbent],
  data() {
    return {}
  },
  created(){},
  methods:{}, 
  watch:{}
}

. 3. Même nom Les fonctions hook seront combinées en un seul tableau, donc les deux seront appelées. De plus, les hooks de l'objet mixin seront appelés avant les propres hooks du composant.

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

4. Lorsque les noms de clé de deux objets sont en conflit, la paire clé-valeur de l'objet composant est prise.

var mixin = {
  methods: {
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.conflicting() // => "from self"

Application des mixins

var install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (options) {
    // 逻辑...
  }
}

(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs

, Vidéo de programmation de base)

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!