mixins도 임포트 하지 말고 사용 해 보자

안상철·2023년 1월 8일
0

Vue.js

목록 보기
7/9
post-thumbnail
post-custom-banner

global 컴포넌트 만들기 글에서처럼 mixins에 정의 된 함수도 글로벌하게 전역으로 설정해 import하지 않고 사용 해 보자

import camelCase from 'lodash/camelCase'
const requireMixins = require.context('.', false, /\.js$/)
const mixins = {}

requireMixins.keys().forEach(fileName => {
  if (fileName === './index.js') return
  const mixinName = camelCase(
    fileName.replace(/(\.\/|\.js)/g, '')
  )
  mixins[mixinName] = requireMixins(fileName).default
})
export default mixins

mixins 디렉토리에 글로벌하게 사용 할 함수들을 모아둘 global 디렉토리를 생성후, 해당 디렉토리의 index.js 파일에 위처럼 작성 해 준다.

다른 컴포넌트에서 this. 키워드를 사용해 직접 꺼내 사용할 수 있게 된다.

profile
웹 개발자(FE / BE) anna입니다.
post-custom-banner

0개의 댓글