Introduction aux opérations liées au mixage de vues (avec exemples)

Cet article vous apporte une introduction aux opérations pertinentes du mixage de vues (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Définition : Le mixage est un moyen très flexible de distribuer des fonctions réutilisables dans les composants Vue. 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.

Exemple :

//定义一个混入对象
var myMixin={
    created:function(){
        this.hello();
    },
    methods:{
        hello:function(){
            console.log('hello from mixin');
        }
    }
}
//定义一个使用混入对象的组件
var Component = Vue.extend({
    mixins:[myMixin]
})
var component = new Component();=>hello from mixin

Fusion d'options

Lorsque les composants et les mixins contiennent des options du même nom, ces options seront mélangées dans le format approprié chemin.
Par exemple, les objets de données seront 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 auront la priorité.

var mixin ={
    data:function(){
        return{
            messageL:'hello',
            foo:'abc'
        }
    },
    created(){
        console.log('混入对象的钩子被调用')
    }
}
new Vue({
    mixins:[mixin],
    data:function(){
        return{
            message:'goodbye',
            bar:'def
        }
    },
    created:function(){
        console.log('组件钩子被调用')
        console.log(this.$data);
        // => { message: "goodbye", foo: "abc", bar: "def" }
    }
})

Les options dont les valeurs sont des objets, telles que les méthodes, les composants et les directives, seront mélangées dans le même objet. Lorsque les noms de clé de deux objets sont en conflit, la paire clé-valeur de l'objet composant est utilisée.

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

Mix-in global

Vous pouvez également enregistrer des objets mix-in globalement. Attention à l'utilisation ! Une fois qu'un objet mixin global est utilisé, il 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.

//为自定义的选项myOption注入一个处理器。
Vue.mixin({
    creted:function(){
        var myOption = this.$options.myOption;
        if(myOption){
            console.log(myOption)
        }
    }
})
new Vue({
    myOption:'hello'
})

Utilisez les mixins globaux avec prudence, car ils affecteront chaque instance Vue créée individuellement (y compris les modèles tiers). Dans la plupart des cas, cela ne doit être appliqué qu'aux options personnalisées, comme dans l'exemple ci-dessus. Il peut également être utilisé comme plugins pour éviter la duplication des effets.

Stratégie de fusion d'options personnalisées

Les options personnalisées utiliseront la stratégie par défaut, qui consiste simplement à écraser les valeurs existantes. Si vous souhaitez que les options personnalisées soient fusionnées avec une logique personnalisée, vous pouvez ajouter une fonction à Vue.config.optionMergeStrategies :

Vue.config.optionMergeStrategies.myOption=function(toVal,fromVal){
    return mergedVal
}

Pour la plupart des options d'objet, vous pouvez utiliser les stratégies de fusion des méthodes :

var strategies = Vue.config.optionMergeStrategies;
strategies.myOption = strategies.methods

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !

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!