JavaScriptでのコンポーネントへのデータ渡し

親コンポーネントから子コンポーネントにデータを渡すことができます。 これを行うには、コンポーネントタグ内にデータ属性を記述します。 例えば、ユーザーの名前と姓を渡してみましょう:

App.vue<template>
  <User name="john" surn="smit" />
</template>

このように渡されたデータはプロップスと呼ばれます。 コンポーネントがこのデータを受け取るためには、 設定のpropsでそれらの名前を列挙する必要があります:

components/User.vue<script>
  export default {
    props: ['name', 'surn'],
    data() {
      return {
        
      }
    }
  }
</script>

これで、渡されたデータを子コンポーネントのテンプレート内で表示できるようになりました:

components/User.vue<template>
  {{ name }}
  {{ surn }}
</template>