實例解答vue元件的使用方式

這篇文章主要介紹了實例解答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==&#39;出售&#39; || option.tradeDesc==&#39;租购&#39;">售</span>
                <span class="today-badge red"   v-if="option.tradeDesc==&#39;租售&#39; || option.tradeDesc==&#39;租购&#39; ">租</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: [&#39;option&#39;],   <!-- 传入的每一项的值  -->
    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元件的使用方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！