这篇文章主要介绍了实例解答vue组件的使用方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在项目开发中，我们有必要将一些公共模块封装成组件。
例如下图：
看到这个样式，我们一定会想，下面三条数据一定是后台返回给前端一个数组，然后我们遍历出来。
第一种做法: 直接在页面去遍历这个数组，然后把三条数据展示出来。
第二种做法： 封装一个一条数据时候的组件，然后在页面遍历这个组件。
实际开发中我们采用的是第二种方式，哪有人一定会问了，第一种多简单，干嘛用第二种。
理由：如果一个模块在多个地方展示，而你的这个模块只是写在自己的页面里面，其他地方也需要，这时候就需要重新写这个模块，费时费力。
所以我们先定一个组件，以上面为例：
文件名字： todayhou.vue<template>
<p class="today-body">
<p class="today-list clearfix">
<p class="badge-box fl">
<span class="today-badge green" v-if="option.tradedesc=='出售' || option.tradedesc=='租购'">售</span>
<span class="today-badge red" v-if="option.tradedesc=='租售' || option.tradedesc=='租购' ">租</span>
<span class="today-badge white" v-if="option.typedesc">私</span>
<span class="today-badge white" v-if="option.leveldesc">{{option.leveldesc}}</span>
<p class="today-time">{{option.followtime}}</p>
</p>
<p class="info-box fl">
<p class="info-name"><span>{{option.communityname}}</span><span>·{{option.roomnum }}室</span><span>{{option.hallnum }}厅</span><span>{{option.toiletnum }}卫</span><span>{{option.area }}·㎡</span></p>
</p>
<p class="price-box fr">
<p class="info-price">{{option.saleprice}}
<span>万</span>
</p>
<p class="info-rent">{{option.rentprice}}
<span>元/月</span>
</p>
</p>
</p>
</p></template><script>export default {
name: "todayhou",
props: ['option'], <!-- 传入的每一项的值 -->
data() {
return {
};
}
};</script><style lang="less"></style>
主页面： home.vue<!-- 使用组件 --><template>
<p class="home">
<card class="bg-white today">
<today-hou v-for="item in 组件遍历的数组 " v-bind:key="item.你设定的唯一标识" v-bind:option="item"></today-hou>
</card>
</p></template><script>import todayhou from "./todayhou"; <!-- 引入组件 -->export default {
data() {
return {
}
},
components: {
todayhou <!-- 注册组件 -->
},
created() {
this.组件遍历的数组 = "后台接口返回值"; <!-- 组件传值 -->
},
methods:{
}
};</script><style lang="less">@import url("./home.less");.none-border{ padding:0 !important;}</style>
相关推荐：
vue.js中组件的创建和使用方法
vue 组件介绍
vue 创建组件的两种方法
以上就是实例解答vue组件的使用方式的详细内容。