使用 props

呈現結果為：

原始碼如下：

            
        <div id="app-7">
            <ol>

                <todo-item
                        v-for="loveitem in groceryList"
                        v-bind:todo="loveitem"
                        v-bind:key="loveitem.id">
                </todo-item>
            </ol>
        </div>
            
        

【注意】這裡的loveitem可以換成任何詞。

            
        Vue.component('todo-item', {
            props: ['todo'],
            template: '
{{ todo.text }}
'
        })


        var app7 = new Vue({
            el: '#app-7',
            data: {
                groceryList: [
                    { id: 0, text: 'Vegetables' },
                    { id: 1, text: 'Cheese' },
                    { id: 2, text: 'Whatever else humans are supposed to eat' }
                ]
            }
        })