身長の高さで色を変える

参考コード

  • コンポーネントからコンポーネントへ値を渡すために porps を用いる。
  • App.vue の中の <Member :data="member"/> で Member コンポーネントに data という名前で member の値が渡される。
  • Member.vue コンポーネントの中の props: { data: Object } で、渡された data という名前の props を受け取っている。この data が Object であることも指定している。（他にも String, Array 等を指定できる）
  • props は、data や computed と同じく reactive な値なので、template から {{data}} という形でアクセスできる
App.vue
<template>
  <div>
    is ready
    <Member :data="member"/>
    </div> 
</template>

<script>
import Member from './components/Member'
export default {
  name: "App",
  components: {
    Member
  },
  data() {
    return {
      member: {
        name: '中西',
        id: 1,
        position: 'ガード',
        height: 163
      }
    }
  }
};
</script>

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

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

<style>
</style>