子コンポーネント

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

<template>
  <p>{{ text }}</p>
</template>

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

親コンポーネント

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

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

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

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