new Vue({
el: '#app',
data() {
return {
data: [
{
name: 'kongzhi1',
age: '29',
sex: 'man'
},
{
name: 'kongzhi2',
age: '30',
sex: 'woman'
}
]
}
},
methods: {
}
});
js 代碼如下：
Vue.component('tb-list', {
template: '#tb-list',
props: {
data: {
type: Array,
required: true
}
},
data() {
return {
}
},
beforeMount() {
},
mounted() {
},
methods: {
}
});上面代碼我們注冊了一個(gè)叫 tb-list 這么一個(gè)組件，然后給 tb-list 傳遞了一個(gè)data屬性值；該值是一個(gè)數(shù)組，如下值：
data: [
{
name: 'kongzhi1',
age: '29',
sex: 'man'
},
{
name: 'kongzhi2',
age: '30',
sex: 'woman'
}
]tb-list組件模板頁面是如下：
遍歷data屬性值，然后使用slot來接收 tb-list組件中的任何內(nèi)容；其內(nèi)容如下：
姓名:{{scope.row.name}}
年齡: {{scope.row.age}}
性別: {{scope.row.sex}}
索引：{{scope.$index}}
重慶分公司
重慶分公司
