Component への分割と Props の受け渡し
Tweet- Component に分割する
- import/export を思い出しましょう
- Props の渡し方、受け取り方を思い出しましょう
App.vue
<template>
<div>
<Member :key="member.id" v-for="member in members" :member="member">{{member.name}}</Member>
</div>
</template>
<script>
import Member from "./components/Member";
export default {
name: "App",
components: {
Member
},
data() {
return {
members: [
{ name: "中西", position: "ガード", id: 1, height: 163 },
{ name: "佐々木", position: "フォワード", id: 2, height: 173 },
{ name: "渡辺", position: "センター", id: 3, height: 180 },
{ name: "城所", position: "パワーフォワード", id: 4, height: 176 },
{ name: "荒瀬", position: "シューティングガード", id: 5, height: 168 }
]
};
}
};
</script>
<style>
</style>
/components/Member.vue
<template>
<div>{{member}}</div>
</template>
<script>
export default {
props: {
member: Object
}
};
</script>
<style>
</style>