Qu'est-ce que le mix-in dans vue.js-Voir.js-php.cn

Qu'est-ce que le mix-in dans vue.js

coldplay.xixi

Libérer： 2020-11-30 14:25:28

original

2437 Les gens l'ont consulté

vue.js mix-in définit une partie de méthodes réutilisables ou de propriétés calculées. L'objet mix-in peut contenir n'importe quelle option de composant. Lorsqu'un composant utilise un objet mix-in, toutes les options du mix-in. dans l'objet sera mélangé aux options du composant lui-même.

Qu'est-ce que le mix-in dans vue.js

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.4.2, cet article est applicable à toutes les marques d'ordinateurs.

【Articles connexes recommandés : vue.js】

混入 (mixins) définit certaines méthodes réutilisables ou propriétés calculées. Les mixins 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.

Regardons un exemple simple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: &#39;#databinding&#39;,
data: {
},
methods : {
},
});
// 定义一个混入对象
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write("欢迎来到混入实例");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>

Copier après la connexion

Fusion d'options :

Lorsque les composants et les mixins contiennent des options du même nom, ces options seront fusionné avec la manière appropriée de mélanger.

Par exemple, les objets de données sont fusionnés de manière récursive en interne, et en cas de conflit avec les données des composants, les données des composants sont prioritaires.

Remarque :

(1) Vous définissez un attribut de données dans l'objet mixte, qui contient diverses valeurs d'attribut. Il existe également un attribut de données dans le composant, donc les données de l'objet mixte. et les valeurs de l'objet composant seront fusionnées et les données des composants portant le même nom seront limitées

(2) Les fonctions hook portant le même nom seront appelées et le hook de l'objet mixte sera appelé avant ; le propre hook du composant

Global mixin

est :

Vue.mixin({ // 混入函数 })

Copier après la connexion

Attention ! À utiliser avec prudence Une fois que vous utilisez un objet mixin global, cela affectera toutes les instances Vue créées ultérieurement. Lorsqu'elle est utilisée de manière appropriée, la logique de traitement peut être injectée dans des objets personnalisés.