컴포넌트 기초

Select

Nov 24, 2023

컴포넌트(이름이 있는 재사용 가능한 인스턴스)를 만들 수 있다

전역 등록 → createApp().component(이름, 옵션객체)로 생성

app 컴포넌트 인스턴스와 같은 옵션들을 가질 수 있다

지역 등록(권장) → 생성된 app의 components 속성 이용

template와 props 속성을 이용해서 만든다

template: html 요소들을 작성

디렉티브 등 vue html을 그대로 쓸 수 있다

props: 외부에서 데이터를 넣어줌(상위에서 하위로 넣어줌). 배열형태에 문자열을 넣어줘서 등록

<컴포넌트이름 props이름=”props값”></컴포넌트이름>으로 외부에서 props를 넣어주면 됨
읽기 전용이라서 컴포넌트 내부에서 수정을 하지 못한다 ⇒ $emit 이용

props와 반대 방향으로 $emit으로 하위 컴포넌트에서 상위 컴포넌트로 데이터를 넣어줄 수 있다

$emit이 발생시킨 이벤트의 handler 메소드(v-on)를 매개변수 없이 이름만 명시한다면 $emit의 매개변수가 자동으로 넘어옴
but. 메소드에 매개변수가 하나라도 있다면(호출 형태라면), 자동으로 넘어오지 못함

⇒ $event라는 이름의 매개변수를 명시하면 자동으로 쓸 수 있음


<upper-name v-for="fruit in fruits" 
	:key="fruit.id"
	:name="fruit.name"
	@to-upper="toUpper(fruit, $event)> //$event : 넘겨온 매개변수(this.hello.toUpperCase())
</upper-name>

..
<script>
	const App = {
		..
		data: {
			return {
				fruits: []
			}
		}
		methods: {
			toUpper(fruit, uppername) { //$event는 넘겨진 매개변수를 뜻함
				fruit.name = uppername //fruits의 data가 자동으로 수정됨
			}
		}
		..
	}
	const app = Vue.createApp(App)

//새 컴포넌트
	app.component('upper-name', {
		templates: `
			<div @click="capitalize"
				{{ name }}
			</div>
		`,
		props: ['name']
		methods: {
			capitalize() {
				this.$emit('to-upper', this.hello.toUpperCase()) //상위 데이터를 변경하는 이벤트 발생
				// this.hello = this.hello.toUpperCase() => X(props는 readonly)
			}
		}
	}
	const vm = app.mount('#app')
	
</script>