</template>
<script>
export default {
name: "List",
props: {
title: String,
list: Array
}
};
</script>
在父组件中使用：
<template>
<div class="tirp-wrapper">
<list title="酒店列表" :list="list">
<span slot-scope="props">
{{props.item.name}}
</span>
</list>
</div>
</template>
<script>
import List from "./List";
export default {
name: "Trip",
components: { List },
data() {
return {
list: [{
name: "四季度假村酒店"
},{
name: "布宜诺斯艾利斯四季酒店"
},{
name: "孟买四季酒店"
},{
name: "新加坡四季酒店"
}] };
}
};
</script>
我们再来给每个酒店添加一些描述标签，也能够完美的展示出来。
<template>
<div class="tirp-wrapper">
<list title="酒店列表" :list="list">
<div slot-scope="props">
<span>
{{props.item.name}}
</span>
<el-tag>{{props.item.tag}}</el-tag>
</div>
</list>
</div>
</template>
<script>
import List from "./List";
export default {
name: "Trip",
components: { List },
data() {
return {
list: [{
name: "四季度假村酒店",
tag: "海滨风光"
},{
name: "布宜诺斯艾利斯四季酒店",
tag: "轻奢度假"
},{
name: "孟买四季酒店",
tag: "服务周到"
},{
name: "新加坡四季酒店",
tag: "沙海绿洲"
}] };
}
};
</script>
画风一转，下面我们把它变成一个消息通知列表，可以看到每个文章的点赞数量。
<template>
<div class="tirp-wrapper">
<list title="消息通知" :list="list">
<div slot-scope="props">
<span>
{{props.item.title}}
</span>
<el-badge :value="props.item.value" :max="99">
<el-button size="mini">
<i class="fa fa-thumbs-o-up"></i>
</el-button>
</el-badge>
</div>
</list>
</div>
</template>
<script>
import List from "./List";
export default {
name: "Trip",
components: { List },
data() {
return {
list: [{
title: "Vue一个案例引发「动画」的使用总结",
