【Vue.js】componentを使ってリスト表示をしたい

    <div id="app" class="articleArea">
        <!--v-bindには結びつけるtempleteのpropsを指定する-->
        <datas-joblist v-for="list in joblist" v-bind:todo="list" v-bind:key="list.id"></datas-joblist>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
       // templeteを使う際のタグ名をつける
        Vue.component('datas-joblist', {
            // propsはcomponentのtempleteに名前をつけるもの。new Vueの後とhtmlでtempleteを使用する際にpropsで呼び出せる。
            props:['todo'],
            template: '<article><h2>{{ todo.title }}</h2>{{ todo.text }}</article>'
        });
        
        var app = new Vue({
            el:'#app',
            data:{
                joblist:[
                    {id:0,title:'タイトル',text:'テキスト テキスト テキスト テキスト テキスト '},
                    {id:1,title:'タイトル',text:'テキスト テキスト テキスト テキスト テキスト '},
                    {id:2,title:'タイトル',text:'テキスト テキスト テキスト テキスト テキスト '},
                    {id:3,title:'タイトル',text:'テキスト テキスト テキスト テキスト テキスト '},
                    {id:4,title:'タイトル',text:'テキスト テキスト テキスト テキスト テキスト '},
                    {id:5,title:'タイトル',text:'テキスト テキスト テキスト テキスト テキスト '},
                    ]
            }
        })
    </script>

component定義では、以下の部分がミソとなります。

        Vue.component('datas-joblist', {
            props:['todo'],
            template: '<article><h2>{{ todo.title }}</h2>{{ todo.text }}</article>'
        });

表示する特定の投稿のタイトルやコンテンツなどのデータをコンポーネントに渡すことができない限り、そのコンポーネントは役に立たないということです。プロパティはここで役立ちます。
コンポーネントの基本 — Vue.js

プロパティはコンポーネントに登録できるカスタム属性です。値がプロパティ属性に渡されると、そのコンポーネントインスタンスのプロパティになります。
コンポーネントの基本 — Vue.js

ということで、componentを設定しても、templeteに設定した{{ ~~~~ }}に対してデータを挿入しなければ、テンプレートとして使用することはできないというわけです。

以下がシンプルでわかりやすい例です。

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

上記のようにVue.jsでtempleteとprops（プロパティ名）を指定をしておけば、

html側で

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

と、タグ内にpropsの値を指定するだけでtempleteを利用することが可能ということです。

参考

jp.vuejs.org