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 @click="foo">child component</h1>`, methods:{ foo(){ console.log('Child foo()'+this.msg++) } } }) Vue.component('kid',{ template:`<h1 @click="foo">kid component</h1>`, methods:{ foo(){ console.log('Kid foo()'+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 @click="foo">child component</h1>`, mixins:[mixin] }) Vue.component('kid',{ template:`<h1 @click="foo">kid component</h1>`, mixins:[mixin] })
여기서는 두 컴포넌트가 this.msg를 통해 믹스인에 정의된 msg를 참조할 수 있지만, 에디터에서는 이를 시도했고 두 컴포넌트가 동일한 msg를 참조하지 않습니다. . 그러나 각각은 새로운 메시지를 생성했습니다. 동일한 데이터가 구성 요소에 정의된 경우 믹스인의 메시지가 아닌 구성 요소의 메시지가 여기에서 참조됩니다.
위 내용은 Vue 믹스인이 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!