markdown 道具（子へのデータの渡し方）

Posted 2021-05-05

# 子コンポーネント

`props`で受け取るデータを定義する。`template`で使用できる。

```vue: Chlid.vue
<template>
  <p>{{ text }}</p>
</template>

<script>
export default {
  props: {
    text: String,
  }
}
</script>
```

# 親コンポーネント

渡すデータを属性`v-bind:`で指定して渡してあげる。
大抵の場合はstoreとかのデータだが、変更したら反映される。

```vue
<template>
  <child
    v-bind:text="text"
  />
</template>

<script>
import Child from "./Child.vue";

export default {
  data: function(){
    return{
      text: "hoge text"
    }
  },
  compoents: {
    Child,
  }
}
</script>
```