[Vue] 05)Vue Component 활용 연습

• Vue CLI를 실행하면 이미 HelloWorld.vue라는 컴포넌트가 생성되어 있고 App.vue에 등록되어 사용되고 있음
  • npm run serve 명령어를 진행했을 때 나온 화면 대부분이 그것

MyComponent.vue

1. src/components/ 안에 생성
2. script에 이름 등록
3. template에 요소 추가

// MyComponent.vue

<template>
	<div>
		<h1>This is my component</h1>
	</div>
</template>

<script>
export default{
	name: 'MyComponent',
}
</script>

<style>
</style>

component 등록 3단계

1. 불러오기
2. 등록하기
3. 보여주기

// App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<!-- 3.보여주기 -->
		<HelloWorld Msg="Welcome to Your Vue.js App"/>
	</div>
</template>

<script>
// 1. 불러오기
import HelloWorld from './components/HelloWorld.vue'

export default{
	name: 'App',
	components: {
	// 2.등록하기
		HelloWorld,
	}
}
</script>

component 등록 - 불러오기

• import {instance name} from {위치}
• instance name은 instance 생성 시 작성한 name
• @는 src의 shortcut
• .vue 생략 가능

// App.vue
<script>
import HelloWorld from './components/HelloWorld.vue'
import MyComponent from '@/components/MyComponent'

export default{
	name: 'App',
	components: {
		HelloWorld,
		MyComponent
	}
}
</script>

component 등록 - 보여주기

• 닫는 태그만 있는 요소처럼 사용

// App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<MyComponent/>
		<HelloWorld msg="Welcome to Your Vue.js App"/>
	</div>
</template>

자식 컴포넌트 작성

• src/components/ 안에 MyChild.vue 생성

// MyChild.vue

<template>
	<div>
		<h3>This is child component</h3>
	</div>
</template>

<script>
export default{
	name:'MyChild'
}
</script>

• MyComponent에 MyChild 등록

// MyComponent.vue

<template>
	<div class='border'>
		<h1>This is my component</h1>
		<MyChild/>
	</div>
</template>

<script>
import MyChild from '@/components/MyChild'

export default{
	name: 'MyComponent',
	components: {
		MyChild,
	}
}
</script>

• component 재사용 예시

// MyComponent.vue

<template>
	<div class='border'>
		<h1>This is my component</h1>
		<MyChild/>
		<MyChild/>
		<MyChild/>
	</div>
</template>

• 또다른 재사용

// App.vue

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<MyComponent/>
		<MyComponent/>
		<HelloWorld msg="Welcome to your vue.js App"/>
	</div>
</tempalte>