Vue의 mixin에 대한 간단한 토론

Vue는 구성 요소 콘텐츠를 보다 효율적으로 재사용하기 위해 혼합 메커니즘인 믹스인을 제공합니다. 처음에는 구성품과 별 차이가 없다고 생각했습니다. . 나중에 나는 그것이 틀렸다는 것을 알았다. 일반적인 상황에서 믹스인과 가져온 컴포넌트의 차이점을 살펴보겠습니다. 컴포넌트가 참조된 후에는 상위 컴포넌트의 props 값을 기반으로 해당 작업을 수행하기 위해 상위 컴포넌트에 별도의 공간을 여는 것과 같습니다. 본질적으로 둘은 서로 구별되고 상대적으로 독립적입니다. 믹스인은 컴포넌트를 도입한 후 데이터 및 기타 메소드, 메소드 및 기타 속성과 같은 컴포넌트의 내부 컨텐츠를 상위 컴포넌트의 해당 컨텐츠와 병합합니다. 도입 이후 상위 컴포넌트의 다양한 속성 메소드가 확장된 것과 동일합니다.

간단한 구성 요소 참조:

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

믹스인:

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

주목할 가치가 있습니다. 믹스인을 사용할 때 상위 구성 요소와 하위 구성 요소는 모두 하위 구성 요소에 다양한 속성 메서드를 가지고 있지만 이것이 이러한 변수를 동시에 공유하고 처리한다는 의미는 아닙니다. 병합 외에는 둘 사이에 아무 것도 수행되지 않습니다. 의사소통. 처음 믹스인을 봤을 때 순진하게도 vuex와 유사한 하향식 데이터 공유 솔루션이 보이는 것 같아 매우 흥미로웠습니다.

Vue의 믹스인을 소개하겠습니다

1. 믹스인이란

믹스인 파일은 Vue 컴포넌트의 모든 컴포넌트를 담을 수 있는 객체입니다. 이는 Vue 구성 요소의 재사용 가능한 기능을 배포하는 매우 유연한 방법입니다. 구성 요소에서 믹스인을 사용하면 minxin의 모든 속성/메서드가 구성 요소의 속성/메서드와 혼합됩니다.

둘째, mixins 사용

Vue 컴포넌트에는 mixins 속성을 가질 수 있으며, 이 속성의 값 유형은 배열입니다. mixin 배열의 mixins 요소로 mixin을 도입합니다: [mixin]

컴포넌트 A는 mixin을 적용하며, 메서드, 컴포넌트 및 지시문과 같은 두 속성이 동일한 개체에 혼합됩니다. 지시문의 이름 속성이 동일하면 믹스인에 있는 지시문은 무시됩니다. 동일한 이름의 Hook 함수가 배열로 구성되어 모두 호출되며, 해당 컴포넌트의 Hook 함수보다 먼저 mixin의 Hook 함수가 호출됩니다.

관련 추천 :

riot.js 학습 [2] mixin

JS 사용자 정의 mixin 함수 예제

Mixin의 개념은 무엇인가요?

위 내용은 Vue의 mixin에 대한 간단한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!