vue mixin 예제
Vue 응용 프로그램의 사물 계층 구조에서 구성 요소 혼합 내부는 기본적으로 먼저 적용됩니다. 어떤 경우에도 mixin을 재정의할 수 있도록 구성 요소가 두 번째로 적용됩니다. 따라서 일종의 권위 충돌이 있을 때 Vue 구성 요소는 항상 최종 말과 재정의 권한을 갖게 된다는 점을 항상 기억하는 것이 중요합니다. 당신이 볼 수 있듯이, mixin을 사용한 후, 구성 요소는 mixin의 모든 데이터를 포함하고, 이를 사용하여 액세스된다. 별도의 파일 대신 변수를 사용하여 mixin을 정의할 수도 있습니다. 솔직히, 그건 당신이 mixins에 대해 알아야 할 대부분의,하지만 난 특정 사용 사례와 코너 케이스에 대해 더 알고 유용하다고 생각합니다. 글로벌 믹스인은 말 그대로 모든 단일 구성 요소에 적용됩니다. 이러한 이유로, 그들에 대 한 사용 사례는 매우 제한 되 고 그들은 큰 주의 고려해 야 한다. 내가 생각할 수있는 한 가지 사용은 플러그인과 같은 것입니다, 당신은 모든 것에 액세스 할 필요가있을 수 있습니다. 그러나 이 경우에도 특히 블랙박스가 될 수 있는 응용 프로그램으로 기능을 확장할 때 적용하려는 내용에 대해 주의해야 합니다. 원하는 방식으로 디렉터리 구조를 설정할 수 있지만 정리를 유지하기 위해 mixin 디렉터리를 만들고 싶습니다.
우리가 만들 것 이다 .js 확장자 (반대로 .vue, 우리의 다른 파일 처럼), 그리고 우리는 mixin에 대 한 개체를 내보낼 것 이다: Mixins 다시 사용 하려는 기능의 작은 조각을 캡슐화 하는 데 유용할 수 있습니다. 그들은 확실히 당신이 사용할 수있는 유일한 옵션이 아닙니다 : 예를 들어, 더 높은 순서의 구성 요소는 유사한 기능을 구성 할 수 있습니다, 이것은 단지 하나의 작업 방법입니다. 나는 우리가 주위에 상태를 통과 할 필요가 없기 때문에 mixins를 좋아하지만,이 패턴은 확실히 남용 될 수 있으므로 응용 프로그램에 가장 적합한 옵션을 통해 생각하십시오. 구성 요소에서 프로젝트 폴더에 있는 모든 곳에서 mixin 개체를 가져옵니다. 왜 없을까요? 결국 기능과 시각적 동작을 구성 요소로 분리하는 것은 달콤한 라이브러리입니다. 그러나 경우에 따라 여러 구성 요소/Vue 인스턴스에서 기능을 공유해야 할 수도 있습니다. 즉, mixins와 플러그인은 많은 도움을 제공 할 수있는 곳이다. mixin은 함수, 소품, 데이터, 계산된 속성을 가진 JavaScript 개체일 뿐입니다.
mixin의 name() 메서드가 충돌 중에 무시된 방법을 확인합니다.
