HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive/
🏞️
Vue/
믹스인

믹스인

Select
Nov 28, 2023
컴포넌트를 다른 컴포넌트의 믹스인으로 등록하면, 믹스인에서 쓰는 data, methods 등 모든 옵션을 따로 표시 없이 쓸 수 있다
 
  • 지역적 ⇒ mixins옵션에 에 만든 믹스인을 등록한다
  • 전역적 ⇒ createApp()으로 만들어진 app 컴포넌트에 mixin 메소드로 주입
    • createApp(옵션객체)이나 app.compoenent(컴포넌트이름,옵션객체) 등으로 옵션을 주면, 믹스인에서 this.$options.옵션이름 으로 옵션을 쓸 수 있다
 
[규칙]
  1. 믹스인 옵션(data, components, methods 등)은 컴포넌트에서 재정의 될 수 있다(=덮어 쓸 수 있다)
  1. 라이프사이클은 믹스인의 것과 컴포넌트의 것 모두 호출된다
 
지역등록 ex)
 
 
  1. 같은 폴더의 컴포넌트들을 export하는 파일을 index.js로 따로 만들어서, 컴포넌트들을 한번에 import할 수 있다
      • 각 component에서 export default로 내보내기를 하고 있으므로, export { default as 이름 } from ‘컴포넌트경로’ 로 내보낸다
      • 가져올 땐 import * as 컴포넌트집합이름 from 경로
        • webpack으로 인해, 경로에서 index.js를 생략하여 표기할 수 있다
      • …컴포넌트집합이름 으로 하면 컴포넌트들을 한번에 명시가능
 
  1. <!— eslint-disable 린트규칙이름—> 로 린트를 끌 수 있고, <!— eslint-enable 린트규칙이름—> 로 린트를 다시 켤 수 있다
      • 린트 규칙 이름을 명시하지 않으면 린트 전체가 비활성화된다
 
 
export default {
    props: {
        modelValue: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        items: {
            type: Array,
            default: () => ([])
        }
    },
    emits: ['update:modelValue']
}
mixin.js
<template>
  <h2>{{ title }}</h2>
  <input @input="$emit('update:modelValue', $event.target.value)">
</template>
  
  <script>
    import fieldMixin from './mixin'
    export default {
        mixins: [fieldMixin]
    }
  </script>
TextField.vue
export { default as TextField } from './TextField'
export { default as SimpleRadio } from './simpleRadio'
index.js
<script>
	import * as FieldComponents from '~/components/fields/index'
	    
	export default {
	    components: {
	        ...FieldComponents
	    },
	...
</script>
App.vue