vue에서 믹스인의 사용법과 주의사항에 대해 자세히 알아보세요.

이 글은 Vue의 믹스인(믹싱) 기능을 이해하고, 믹스인의 사용법과 주의사항을 소개하는 글이 될 것입니다.

mixins의 기본 개요

vue는 이렇게 설명되어 있습니다. 언어가 지루하다면 건너뛰셔도 됩니다~

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

사용 방법은?

예:

mixin 개체 정의

mixin 개체를 현재 구성 요소에 혼합합니다.

사용법은 매우 간단한 것 같습니다

mixins의 기능

1가지 방법 그리고 컴포넌트 간에는 매개변수가 공유되지 않습니다

혼합된 객체의 매개변수 num

컴포넌트 1의 매개변수 num은 +1로 연산됩니다

컴포넌트 2의 매개변수 num은 연산되지 않습니다

두 컴포넌트에서 각각 출력되는 num 값을 살펴보세요

보시다시피 컴포넌트 1의 num 값을 변경했지만 컴포넌트 2의 num 값은 여전히 ​​초기값입니다. 개체에 혼합된 값

2 값은 메서드, 구성 요소 등 개체의 옵션입니다. 옵션은 병합되며 키 충돌이 있는 구성 요소는 혼합 개체의

메서드

를 재정의합니다.

컴포넌트 내 메소드

인쇄 테이블의 출력

3 값이 생성됨, 마운트됨 등의 함수인 옵션이 병합되어 호출됩니다. 혼합된 객체의 함수는 컴포넌트의 Hook 함수보다 먼저 호출됩니다

Mixed in 객체 함수의 콘솔

컴포넌트 함수의 콘솔

인쇄 테이블의 인쇄 차이

과 vuex

위의 예를 보면 차이점이 확연해집니다~

vuex: 상태 관리에 사용됩니다. 여기에 정의된 변수는 각각에서 사용 및 수정이 가능합니다. 구성 요소에서 이 변수의 값을 수정하면 다른 구성 요소의 이 변수 ​​값도 그에 따라 수정됩니다.

Mixins: 공유 변수는 각 구성 요소에서 정의되고 사용될 수 있습니다. 각 변수는 구성 요소에 도입된 후 서로 독립적이며 값을 수정해도 구성 요소에서 서로 영향을 미치지 않습니다.

과 공용 구성 요소의 차이점

동일한 명백한 차이점이 다시 나열됩니다~

구성 요소: 상위 구성 요소에 구성 요소를 도입하는 것은 하위 구성 요소 사용을 위해 상위 구성 요소에 독립 공간을 제공하는 것과 같습니다. , 그리고 props를 기반으로 값을 전달하지만 본질적으로 둘은 상대적으로 독립적입니다.

Mixins: 구성 요소가 도입된 후 구성 요소의 개체 및 메서드와 병합됩니다. 이는 상위 구성 요소의 개체 및 메서드를 확장하는 것과 동일하며 새로운 구성 요소를 형성하는 것으로 이해될 수 있습니다.

관련 추천: "

vue.js Tutorial"

위 내용은 vue에서 믹스인의 사용법과 주의사항에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!