Vue) Component

나 안해·2023년 3월 18일

vue

목록 보기

8/10

Component?

HTML을 하나의 단어로 줄여서 사용하는 문법

vue에서 작업하다모면 태그가 너무 많아지니까 컴포넌트를 사용해서 가독성을 높힐 수 있겠다.

이걸 왜 쓸까?

보기 좋으니까
반복적인 작업을 피할 수 있으니까
일괄 변경이 용이해서

1. 순서

1.1 vue파일 만들기

<template>
	<div>
		content1
	</div>
	<div>
		content2
	</div>
</template>

위의 내용에서 content1을 컴포넌트로 축약한다고 가정하자

먼저 content1.vue 파일을 만들고
content1의 내용을 해당 파일로 옮긴다
이 때, 당연하게 vue에서 사용하는 template, script, style은 꼭 넣어준다
- 하나씩 넣지 말고 < + Enter로 <vue> with defalut.vue를 선택

<template>
    <div class="discount">
        content1의 내용
    </div>
</template>
<script>
export default {
    name: 'content1'    
}
</script>
<style>
</style>

1.2 가져오기

import - 등록 - 사용의 세 단계를 거치지 않으면 에러 발생

import
import content1(이름은 달라져도 o) from content1파일의 경로;

등록
components: {}에 등록

{} 내부의 내용은 사용할 이름 : import한 이름이다

사용
원하는 위치에서 <사용할 이름/>로 작성

# content1.vue
<template>
    <div class="discount">
        content1의 내용
    </div>
</template>
<script> 
export default {
    name: 'content1',
}
</script>
<style>
</style>

# app.vue(외에도 content1을 쓸 파일)
<template>
	<content1/>
</template>
<script>
import content1 from 경로;  
export default {
    name: 'app',
    components: {
  		사용할 이름 : import한 이름
  	}
}
</script>
<style>
</style>

관련 오류

- Component name "Content" should always be multi-word vue/multi-word-component-names

원인
요즘 vue에서 두 개 이상의 단어를 사용하기를 권장

해결

시키는대로 해결 :
컴포넌트 명인 Content를 두 개 이상의 단어로 만들어준다
예시) ContentEx

설정으로 해결 :
package.json에서 "rules"라는 항목에서 아래 내용 추가
"rules": {
	"vue/multi-word-component-names": "off"
}