コンポーネントとページ

コンポーネントにプロパティを送る

components/Post.vue

Post.vue コンポーネントで、post オブジェクトの title を出力してみる。コンポーネント内で使うものは props に登録しておく。

<template>
  <article class="single-post">
        {{ post.title }}
  </article>
</template>

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

page/index.vue

ページ側では、先ほどの Post コンポーネント登録する。template 側で Post タグで呼び出すが、その際に先ほど定義した post.title をdate()に定義しておく。

<template>
    <div>
        <Post :post="post" />
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Post from '~/components/Post.vue';

export default Vue.extend({
    components: {
        Post
    },
    data() {
        return {
            post: {
                title: 'ハロー',
                content: 'ホワッツ？'
            }
        }
    }
})
</script>

これでアクセスすると、「ハロー」が表示される。コンポーネント側で post.content を出力すれば「ホワッツ？」が表示される。