<aside> ❗ App.vue(부모 컴포넌트)에서 자식 요소로써 사용할 수 있는 또 다른 vue 파일

</aside>

<template>
	<MyBtn>
		Banana
	</MyBtn>
</template>

<script>
**import MyBtn from '~/components/MyBtn'**

export default {
	**components: {
		MyBtn
	}**
}

• 자식 컴포넌트는 부모 컴포넌트에서 일반 태그처럼 쓰일 수 있다.
• script 영역에서 컴포넌트를 import 해야 쓸 수 있다.

props

// 부모 컴포넌트( App.vue)
<template>
	<MyBtn <u>**color="royalblue"**</u>>
		Banana
	</MyBtn>
</template>

// 자식 컴포넌트 (MyBtn.vue)
export default {
	<u>**props**</u>: {
		color: {
			type: String,
			default: ''
		}
	}
}

• 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하기 위한 수단이다.
• 자식 컴포넌트 태그에 속성과 속성 값을 입력하면 그 데이터를 자식 컴포넌트 내부의 props 옵션의 데이터로 전달한다.

속성 상속

// 부모 컴포넌트
<template>
	<MyBtn style="color: red">
		Banana
	</MyBtn>
</template>

// 자식 컴포넌트
<template>
	<h1 :style="<u>**this.attrs.style**</u>" :class="<u>**this.attrs.class**</u>">
</template>

또는

<template>
	<h1 <u>**v-bind="this.$attrs"**</u>>
</template>

• 부모 컴포넌트가 전달하는 속성을 상속받기 위해서는 자식 컴포넌트의 최상위 요소(루트)가 하나만 존재해야 한다.
• 부모 컴포넌트로부터 상속받은 속성은 this.$attrs 를 통해서도 접근할 수 있다.
• this.$attrs 를 쓰는 방식은 루트가 두 개 이상일 때도 동작하는 방식이다.
• 만약 상속 받는 속성이 두 개 이상이라면 v-bind=”this.$attrs” 로 모든 속성을 상속받을 수 있다.

이벤트 상속

// 부모 컴포넌트
<template>
	<MyBtn <u>**@click**</u>="log"></MyBtn>
</template>

// 자식 컴포넌트
<template>
	<h1 @click="<u>**$emit('click', $event)**</u>"></h1>

<script>
export default {
	<u>**emits</u>: [
		'click'
	]**
}
</script>