首先創造元件

Vue.component('MyName',{
    template:'<li>自行定義</li>'
})

加入剛剛新增(MyName)的元件

<ul>
<MyName></MyName> 
</ul>

若想在元件裡加入動態，就要利用VUE的props屬性來進行動態變化

Vue.component('MyName',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>',
})

並且使用v-bind將data綁入元件當中

<div id="app">
    <ul>
        <MyName v-for="item in number" v-bind:todo="item"></MyName>
    </ul>
</div>

Vue.component('MyName',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>',
})
var app = new Vue({
    el:'app',
    data:{
        number:[
            {text:'數字1'},
            {text:'數字2'},
            {text:'數字3'},
        ]
    },
})

這段程式碼利用 v-for偏歷number這個array，並將提出的元素v-bind給todo這個自定義屬性中。

效果
1.數字1
2.數字2
3.數字3