元件
元件最大的好處就是能重複使用
- index.html
<div id="app">
<ul>
<li v-for="data in dataList">
{{data.text}}
</li>
<list-item></list-item>
<list-item></list-item>
<list-item></list-item>
</ul>
</div>
- index.js
Vue.component('list-item', {
template: '<li>第N個項目</li>'
})
var app = new Vue({
el: '#app'
})
屬性傳入(父元件=>子元件)
- index.html
<ul>
<list-item v-for="data in dataList" v-bind:item="data">
</list-item>
</ul>
- index.js
Vue.component('list-item', {
props:['item'],
template: '<li>{{item.text}}</li>'
})
var app = new Vue({
el: '#app',
data: {
dataList: [
{ text: 'A項目' },
{ text: 'B項目' },
{ text: 'C項目' }
]
}
})
沒有留言:
張貼留言