複数の Props を渡す

参考コード

  • Props は複数渡すことができる
  • 渡す方と受け取る方、両方に追加すればいいだけ
App.vue
<template>
  <div>is ready
    <Member :data="member" :teamName="teamName"/>
  </div>
</template>

<script>
import Member from "./components/Member";
export default {
  name: "App",
  components: {
    Member
  },
  data() {
    return {
      teamName: "JavaScript バスケットチーム",
      member: {
        name: "中西",
        id: 1,
        position: "ガード",
        height: 163
      }
    };
  }
};
</script>

<style>
</style>
/components/Member.vue
<template>
  <div>{{data.name}} #{{data.id}}/{{data.position}}/身長{{data.height}}/{{teamName}}</div>
</template>

<script>
export default {
  props: {
    data: Object,
    teamName: String
  }
};
</script>

<style>
</style>