vuecli에서 만든 프로젝트 전제 조건
css 기술 생략

src/components/Foo.vue

호출된 명령

props에서 기본값을 설정합니다

component 호출 중 아무것도 전달되지 않을 때 기본값을 사용하고 싶으므로required는false로 설정합니다

그나저나 유형만 정의하면 이런 식이에요.

  props: {
    msg: String
  }

다른 속성을 지정하려면 섹션을 중첩하십시오.

  props: {
    msg: {
      type: String,
      default: 'Ya!',
      required: false
    }
  }

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: 'Ya!',
      required: false
    }
  }
}
</script>

src/App.vue

component 호출 주요 처리
prpps 값을 지정하고, 값을 지정하지 않으며, 각각component를 호출합니다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Foo/>
    <Foo msg="Wow"/>
    <Foo/>
  </div>
</template>

<script>
import Foo from './components/Foo.vue'

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

예제 표시

props에 값을 부여하는component에 이 문자열을 표시합니다

props에 부여된 값이 아닌component에 기본 문자열을 표시합니다

Original by Github issue