믹스인

• 지역적 ⇒ mixins옵션에 에 만든 믹스인을 등록한다

• 전역적 ⇒ createApp()으로 만들어진 app 컴포넌트에 mixin 메소드로 주입
• createApp(옵션객체)이나 app.compoenent(컴포넌트이름,옵션객체) 등으로 옵션을 주면, 믹스인에서 this.$options.옵션이름 으로 옵션을 쓸 수 있다

1. 믹스인 옵션(data, components, methods 등)은 컴포넌트에서 재정의 될 수 있다(=덮어 쓸 수 있다)

2. 라이프사이클은 믹스인의 것과 컴포넌트의 것 모두 호출된다

export default {
    props: {
        modelValue: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        items: {
            type: Array,
            default: () => ([])
        }
    },
    emits: ['update:modelValue']
}

<template>
  <h2>{{ title }}</h2>
  <input @input="$emit('update:modelValue', $event.target.value)">
</template>
  
  <script>
    import fieldMixin from './mixin'
    export default {
        mixins: [fieldMixin]
    }
  </script>

1. 같은 폴더의 컴포넌트들을 export하는 파일을 index.js로 따로 만들어서, 컴포넌트들을 한번에 import할 수 있다
• 각 component에서 export default로 내보내기를 하고 있으므로, export { default as 이름 } from ‘컴포넌트경로’ 로 내보낸다
• 가져올 땐 import * as 컴포넌트집합이름 from 경로
• webpack으로 인해, 경로에서 index.js를 생략하여 표기할 수 있다
• …컴포넌트집합이름 으로 하면 컴포넌트들을 한번에 명시가능

export { default as TextField } from './TextField'
export { default as SimpleRadio } from './simpleRadio'

<script>
	import * as FieldComponents from '~/components/fields/index'
	    
	export default {
	    components: {
	        ...FieldComponents
	    },
	...
</script>

1. <!— eslint-disable 린트규칙이름—> 로 린트를 끌 수 있고, <!— eslint-enable 린트규칙이름—> 로 린트를 다시 켤 수 있다
• 린트 규칙 이름을 명시하지 않으면 린트 전체가 비활성화된다