mixins를 Vue의 Template에서 사용하는 방법

Mixins란?

mixins는 Vue 컴포넌트에서 재사용 가능한 코드를 포함하는 객체이다. 이 객체는 다른 컴포넌트에서 import하여 사용할 수 있으며, 컴포넌트에 필요한 기능을 제공하거나 미리 정의된 동작을 적용하는 등의 역할을 할 수 있다.

 

즉, 여러 컴포넌트에서 공통으로 사용할 수 있는 코드를 모아놓은 것이다.

 

Template에서 Mixins 사용하기

Mixins

mixins에 currency라는 객체가 있다. 이 객체는 금액을 화폐에 맞게 ','나 소숫점 자리 등을 포맷팅해주는 기능이 들어있다.

아래는 mixins에 정의된 data와 method이다. 참고로, Object.freeze는 객체를 불변으로 만들기 위한 메소드이다.

 

Vue Component

Vue Component에서는 아래와 같이 사용하면 된다.

currency를 import하고, mixins 필드에 넣어준다.

data는 아래와 같을 때,

 

Vue의 Template에서는 mixins 화폐 포맷팅 함수를 아래와 같이 사용할 수 있다.

getCurrency는 mixins에 정의된 함수이다.