48. Props

• 링크

npm create vue@latest

---

• 프로젝트 링크

---

컴포넌트에서 props 사용하는 방법

1. Props는 컴포넌트의 커스텀 속성으로 생각할 수 있으며, HTML 속성과 유사하게 컴포넌트의 동작을 변경하는 데 사용됩니다.
2. User.vue 파일을 components 디렉토리 안에 생성합니다. 이 컴포넌트는 사용자의 나이를 표시합니다.
3. App 컴포넌트 안에서 User 컴포넌트를 등록하고, template에 추가합니다.
4. 태그 이름은 소문자로 쓸 수 있으며, 템플릿 블록 내에서 컴포넌트 이름을 소문자로 사용합니다.
5. App 컴포넌트에 데이터 함수를 추가하고, age 속성에 20이라는 값을 할당합니다.
6. User 컴포넌트에 age 속성을 전달하기 위해 App 컴포넌트의 템플릿에 age 속성을 추가합니다. 이 속성은 :를 사용하여 바인딩됩니다.
7. User 컴포넌트는 props 속성을 사용하여 age를 받아들입니다. props는 컴포넌트가 받을 수 있는 속성 목록을 정의합니다.
8. User 컴포넌트의 템플릿에서 age를 동적으로 표시합니다.
9. 부모 컴포넌트의 age 값이 변경되면 자식 컴포넌트의 age도 자동으로 업데이트됩니다.
10. Vue 개발자 도구를 사용하여 부모 컴포넌트의 age 값을 변경하면, User 컴포넌트의 age도 변경됨을 확인할 수 있습니다.
11. 반대로, 자식 컴포넌트에서 age를 변경하는 것은 가능하지 않습니다. 이에 대한 이유는 다음 강의에서 탐구할 예정입니다.

App.vue

<script lang="ts">
  import Greeting from "@/components/Greeting.vue";
  import User from "@/components/User.vue";
  export default {
    name: 'App',
    components: {
      Greeting,
      User,
    },
    data() {
      return {
        age: 20,
      }
    }
  }
</script>

<template>
  <p>App.vue</p>
  <Greeting/>
  <User :age="age" />
</template>

User.vue

<script lang="ts">
  export default {
    name: 'User',
    props: ['age']
  }
</script>

<template>
  <p>The user is {{ age }} years old</p>
</template>

<style scoped>

</style>

Greeting.vue

<script lang="ts">
export default {
  name: 'Greeting',
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<template>
<p>{{ msg }}</p>
</template>

<style scoped lang="scss">
p:hover {
  color: darken(#cc4444, 15%);
}
</style>

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from '@/App.vue';
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')