Vue Mixing 관련 작업 소개(예제 포함)

이 글은 vue 믹싱 관련 작업을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 도움이되었습니다.

정의: 믹싱은 Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법입니다. 믹스인에는 임의의 구성요소 옵션이 포함될 수 있습니다. 구성 요소가 mixin 개체를 사용하면 mixin 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다.

예:

//定义一个混入对象
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

Option merge

구성 요소와 믹스인에 동일한 이름의 옵션이 포함된 경우 이러한 옵션은 올바른 방법으로 섞을 것입니다.
예를 들어 데이터 개체는 내부적으로 재귀적으로 병합되며, 구성 요소 데이터와 충돌이 있는 경우 구성 요소 데이터가 우선 적용됩니다.

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" }
    }
})

메서드, 컴포넌트, 지시문 등 객체 값을 갖는 옵션은 동일한 객체에 혼합됩니다. 두 개체의 키 이름이 충돌하는 경우 구성 요소 개체의 키-값 쌍이 사용됩니다.

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

Global mix-in

믹스인 개체를 전역적으로 등록할 수도 있습니다. 사용에 주의하세요! 전역 믹스인 객체가 사용되면 나중에 생성되는 모든 Vue 인스턴스에 영향을 미칩니다. 적절하게 사용하면 처리 논리를 사용자 정의 개체에 주입할 수 있습니다.

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

전역 믹스인 객체를 주의해서 사용하세요. 이는 개별적으로 생성된 각 Vue 인스턴스(타사 템플릿 포함)에 영향을 미치기 때문입니다. 대부분의 경우 이는 위의 예와 같이 사용자 정의 옵션에만 적용되어야 합니다. 효과 중복을 피하기 위해 플러그인으로 사용할 수도 있습니다.

사용자 정의 옵션 병합 전략

사용자 정의 옵션은 단순히 기존 값을 덮어쓰는 기본 전략을 사용합니다. 사용자 정의 옵션을 사용자 정의 로직과 병합하려면 Vue.config.optionMergeStrategies에 함수를 추가하면 됩니다:

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

대부분의 객체 옵션에 대해 메소드 병합 전략을 사용할 수 있습니다: #🎜🎜 #

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

이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의

JavaScript 비디오 튜토리얼 컬럼을 주목하세요!

위 내용은 Vue Mixing 관련 작업 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!