[Vue] MIXIN 함수

각각의 컴포넌트에 똑같은 기능을 하는 함수나 데이터들을 한곳에 모아놓고 저장해놓는 방식

mixin.js을 생성

mixin.js

export const 작명변수 = {
data() {
 return {
  테스트 : "함수"
 }
}
 methods : { 
  함수() {
    return this.테스트 
  }
 },
 computed() {
 },
}

mixin.js는 JS 형태 이지만 vue의 형식을 그대로 써준 후 vue에서 import 시켜주면 그대로 병합된다

사용 vue 파일

import {mixin파일의 작명변수} from "mixin.js 파일의 경로"
mixins : [여기 import 된것 불러오기 ]

-----------html -------------------------------- 

{{함수()}}

return → "함수 "

-----------html -------------------------------- 

이걸 만약 script단에서 불러오고 싶으면 this만 붙이면 된다. 
// this.함수()

MIXIN과 컴포넌트에서 데이터나 함수가 중복될 때

MIXIN의 data()에

테스트 : "함수" 가 있고

컴포넌트내

테스트 : "함수" 가 있을 경우

MiXIN의 테스트 변수가 먼저 랜더링 되지만 컴포넌트가 렌더링 되는 즉시
컴포넌트 안의 데이터로 덮어씌워진다 (let의 재할당 개념)