Vue 믹스인이 무엇인가요?

vue mixin은 Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법입니다. 구성 요소가 mixin 개체를 사용하면 혼합 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다. .

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

mixins

Mixins는 Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법입니다.

혼합 개체에는 임의의 구성 요소 옵션이 포함될 수 있습니다.

구성 요소가 mixin 개체를 사용하면 mixin 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다.

mixins는

구성 요소가 상위 구성 요소 props의 값을 기반으로 해당 작업을 수행하기 위해 참조된 후 상위 구성 요소에 별도의 공간을 여는 것과 동일하다는 것을 이해합니다. 여전히 뚜렷하고 상대적으로 독립적입니다.

그리고 믹스인은 구성 요소를 도입한 후 데이터 및 기타 메서드, 메서드 및 기타 속성과 같은 구성 요소의 내부 콘텐츠를 상위 구성 요소의 해당 콘텐츠와 병합합니다. 도입 이후 상위 컴포넌트의 다양한 속성 메소드가 확장된 것과 동일합니다.

간단한 구성 요소 참조:

상위 구성 요소 + 하위 구성 요소>>> 상위 구성 요소 + 하위 구성 요소

mixins:

상위 구성 요소 + 하위 구성 요소>>>새 상위 구성 요소

는 A를 등록하는 것과 약간 비슷합니다. Vue의 공개 메소드는 여러 구성요소 또는 여러 Vue 객체 인스턴스에 바인딩하여 사용할 수 있습니다. 또 다른 점은 프로토타입 객체에 메서드를 등록하는 것과 유사합니다. 즉, 구성 요소 또는 Vue 인스턴스 객체에서 동일한 함수 이름을 가진 메서드를 정의하여 이를 재정의할 수 있습니다. 하위 클래스와 상위 클래스.

mixins 사용

메서드 재사용

html

<div id="app">
    <child></child>
    <kid></kid>
</div>

js

Vue.component('child',{
    template:`<h1 id="child-nbsp-component">child component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Child foo()&#39;+this.msg++)
        }
    }
})
 
Vue.component(&#39;kid&#39;,{
    template:`<h1 id="kid-nbsp-component">kid component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Kid foo()&#39;+this.msg++)
        }
    }
})

mixins를 사용하기 전에 서로 다른 두 구성 요소의 구성 요소에서 foo 메서드를 호출하려면 메서드가 더 복잡할 경우 반복적인 정의가 필요합니다. 더 중복됩니다. 믹스인을 사용하면 아주 간단해집니다.

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`<h1 id="child-nbsp-component">child component</h1>`, 
        mixins:[mixin]
})
Vue.component(&#39;kid&#39;,{ 
        template:`<h1 id="kid-nbsp-component">kid component</h1>`, 
        mixins:[mixin]
})

여기서는 두 컴포넌트가 this.msg를 통해 믹스인에 정의된 msg를 참조할 수 있지만, 에디터에서는 이를 시도했고 두 컴포넌트가 동일한 msg를 참조하지 않습니다. . 그러나 각각은 새로운 메시지를 생성했습니다. 동일한 데이터가 구성 요소에 정의된 경우 믹스인의 메시지가 아닌 구성 요소의 메시지가 여기에서 참조됩니다.

위 내용은 Vue 믹스인이 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!