在項目開發中，我們有必要將一些公共模塊封裝成組件。

例如下圖：

看到這個樣式，我們一定會想，下面三條數據一定是后臺返回給前端一個數組，然后我們遍歷出來。

• 第一種做法: 直接在頁面去遍歷這個數組，然后把三條數據展示出來。
• 第二種做法： 封裝一個一條數據時候的組件，然后在頁面遍歷這個組件。

實際開發中我們采用的是第二種方式，哪有人一定會問了，第一種多簡單，干嘛用第二種。

理由：

如果一個模塊在多個地方展示，而你的這個模塊只是寫在自己的頁面里面，其他地方也需要，這時候就需要重新寫這個模塊，費時費力。

所以我們先定一個組件，以上面為例：

文件名字： todayHou.vue

<template><div class="today-body"><div class="today-list clearfix"><div 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></div><div 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></div><div class="price-box fr"><p class="info-price">{{option.salePrice}}<span>萬</span></p><p class="info-rent">{{option.rentPrice}}<span>元/月</span></p></div></div></div> </template><script> export default {name: "todayHou",props: ['option'], <!-- 傳入的每一項的值 -->data() {return {};} }; </script><style lang="less"></style>

主頁面： home.vue

<!-- 使用組件 --> <template><div class="home"><Card class="bg-white today"><today-hou v-for="item in 組件遍歷的數組 " v-bind:key="item.你設定的唯一標識" v-bind:option="item"></today-hou></Card></div> </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组件的实例使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。