nuxt props

props
부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 시 사용 (단방향)
cf. 양방향으로 하고 싶으면 $emit() 사용 - 부모에게 props로 받은 데이터가 변경되었을 때 emit을 통해 다시 변경된 데이터를 부모에게 전달한다
자식 컴포넌트 : props 옵션을 사용하여 전달받을 것으로 기대되는 데이터를 명시적으로 선언
자식 컴포넌트

 props: {
    questionItem: {
      required: true,
      type: Object
    }
  },

props 표기법

• html 속성은 대소문자 구분X
• 모든 대문자는 소문자로 인식
• props를 사용할 때 html에서는 kebab-case(article-data) 사용 권장
• js에서는 camelCase(articleData)를 사용하는 것을 권장

부모 컴포넌트

<template>
  <div>
    <PropsTest :test-data="testData"/>
    //자식 컴포넌트 :넘길 이름="자식에게 넘길 값"
  </div>
</template>

<script>
import PropsTest from "@/components/PropsTest";

export default {
  data() {
    return {
      testData: [
          'props-1', 'props-2', 'props-3'
          //넘길 값
      ]
    }
  },
  components: {
    PropsTest,
    //자식 컴포넌트
  },
}
</script>

자식 컴포넌트

<template>
  <div>
    {{ testData }}
    //props 로 넘겨받은 데이터
  </div>
</template>

<script>
export default {
  props: {
  //props 속성 이용해서 정의
    testData: {
      type: Array,
      default: []
      //받을 값에 대한 정의
    }
  }
}
</script>