Vue : Component, Props, Emit

component

• 컴포넌트는 재사용 가능한 독립된 코드 조각을 말한다.
• Vue에서는 SFC(.vue file) 형식으로 사용하며, HTML 요소들을 캡슐화하고 재조립, 중첩하여 하나의 페이지를 구성할 수 있다.

출처 : https://vuejs.org/guide/essentials/component-basics#components-basics

 

 

• 기본으로 주어지는 scr/App.vue 파일을 살펴보면
  • script의 import HelloWorld from './components/HelloWorld.vue'
  • template의 <HelloWorld msg="Vite + Vue" />
  이 있다. 이는 src/components/HelloWorld.vue 라는 컴포넌트를 활용하여 App.vue 내부에서 중첩하여 사용한 것이다.

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="<https://vitejs.dev>" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="<https://vuejs.org/>" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

 

 

---

 

1. 새로운 컴포넌트를 만들어 App.vue 내부에서 사용해보자.

• src/components/MyComponent.vue 생성

<template>
  <div class="my-component">
    this is my component
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.my-component {
  border: 1px solid black;
}
</style>

 

• src/App.vue 에 컴포넌트 추가
  • script에서 import

import MyComponent from './components/MyComponent.vue';

 

• template에서 요소 사용

<template>
  <div>
    <a href="<https://vitejs.dev>" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="<https://vuejs.org/>" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <MyComponent/>
</template>

 

 

 

2. 새로운 컴포넌트를 만들어 MyComponent 내부에서 사용해보자.

• src/components/MyChildComponent.vue 생성

<template>
  <div class="my-child-component">
    this is my child component
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.my-child-component {
  border: 2px solid blueviolet;
  margin: 1rem;
}
</style>

 

• src/components/MyComponent.vue에 컴포넌트 추가
  • script에서 import

import MyChildComponent from './MyChildComponent.vue';

 

• template에서 요소 사용
  • 같은 컴포넌트는 여러번 사용할 수 있다.

<template>
  <div class="my-component">
    this is my component
    <MyChildComponent />
    <MyChildComponent />
    <MyChildComponent />
  </div>
</template>

 

 

 

---

 

 

rops / Emit

• 컴포넌트를 활용하면 코드 가독성 및 재활용성이 올라가지만, 컴포넌트들 간에 데이터를 공유할 수 없다.

 

Props

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다.
• 자식 컴포넌트 요소에 key : value형태의 property로 데이터를 전달하며, 자식 컴포넌트에서는 defineProps() 함수를 사용해 해당 property를 받아 사용한다.
  • defineProps()는 다음과 같은 형식을 취한다

defineProps({
  key: 데이터 형식,
})

 

• 데이터 형식에는 String, Number, Object등이 있다.
• 속성 바인딩을 통해 동적인 값을 전달할 수 있다.

 

• 부모 컴포넌트
  • 자식 컴포넌트에게 key에 value를, key2에 value2에 저장된 value3를 전달한다.

<template>
	<자식컴포넌트 key=value :key2=value2/>
</template>

<script setup>
const value2 = value3
</script>

 

 

• 자식 컴포넌트
  • 부모 컴포넌트에게 전달받은 데이터를 명시한다.

<script setup>
defineProps({
  key: String,
  key2: String,
})
</script>

  <HelloWorld msg="Vite + Vue" />

• App.vue의 일부를 변경했지만, HelloWorld.vue 컴포넌트에서 보여지는 text가 변경됨을 확인할 수 있다.
• App.vue가 props로 msg라는 데이터를 자식 컴포넌트에게 전달한 것이다.

 

 

---

 

 

3.  App.vue에서 MyComponent.vue에게 데이터를 전달해보자.

• App.vue

<script setup>
const myText = 'Hello World!'
const myNum = 88
</script>

<template>
  <MyComponent :text="myText" :num="myNum"/>
</template>

 

• MyComponent.vue

<template>
  <div class="my-component">
    <div>text from parent : {{ text }}</div>
    <div>num from parent : {{ num }}</div>
    <MyChildComponent />
  </div>
</template>

<script setup>
import MyChildComponent from './MyChildComponent.vue';

defineProps({
  text: String,
  num: Number
})
</script>

 

 

4. v-for 을 활용하여 component에 props를 반복적으로 전달할 수 있다.

• App.vue

<script setup>
import MyComponent from './components/MyComponent.vue'
const articles = [
  {
    title: 'Article 1',
    content: 'This is article 1'
  },
  {
    title: 'Article 2',
    content: 'This is article 2'
  },
  {
    title: 'Article 3',
    content: 'This is article 3'
  }
]
</script>

<template>
  <MyComponent v-for="article in articles" :article="article"/>
</template>

 

• MyComponent.vue

<template>
  <div>
    <h2>{{ article.title }}</h2>
    <p>{{ article.content }}</p>
  </div>
</template>

<script setup>
defineProps({
  article: Object
})
</script>

<style lang="scss" scoped>

</style>

 

 

 

---

 

 

Emit

• 자식 컴포넌트는 부모 컴포넌트에게 직접 데이터를 전달할 수 없다.
• 대신 데이터를 포함한 이벤트를 발생시키고, 부모 컴포넌트는 이벤트를 감지하여 데이터를 전달받을 수 있다.
• 자식 컴포넌트
  • eventTrigger라는 이벤트에 message를 포함시켜 발생시킨다.

<script setup>
const emit = defineEmits(['eventTrigger'])
const message = "자식에 있는 데이터"

emit('eventTrigger', message)
</script>

 

• 부모 컴포넌트
  • 자식 컴포넌트에게서 eventTrigger라는 이벤트를 인식할 수 있으며, 해당 이벤트가 발생하면 자신의 receive 함수를 실행시킨다.
  • 자식 컴포넌트에게서 전달된 데이터는 receive 함수의 인자로 사용된다.

<template>
  <자식컴포넌트 @eventTrigger="receive"/> 
</template>

<script setup>

function receive(data) {
  // 부모에게 전달된 `message`가 함수의 input으로 들어옴. 
  // 즉 data라는 변수로 사용 가능
}

</script>

 

 

 

---

 

 

 

5. MyComponent.vue에서 입력받은 데이터를 App.vue에서 보여주자.

• MyComponent.vue

<template>
  <div class="my-component">
  
    <input type="text" @input="onInput">
    
  </div>
</template>

<script setup>

const emit = defineEmits(['inputFromChild'])

const onInput = (e) => {
  emit('inputFromChild', e.target.value)
}

</script>

 

• App.vue

<script setup>
import { ref } from 'vue'

const valueFromChild = ref('')

function onInput(value) {
  valueFromChild.value = value

</script>

<template>

  <div>value from child : {{ valueFromChild }}</div>
  <MyComponent :text="myText" :num="myNum" @inputFromChild="onInput"/>
  
</template>