Beispiele für die Verwendung von Vue-Komponenten

In diesem Artikel wird hauptsächlich die Verwendung von Vue-Komponenten anhand von Beispielen vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Während der Projektentwicklung ist es für uns notwendig, einige öffentliche Module in Komponenten zu kapseln.

Zum Beispiel das folgende Bild:

Wenn wir diesen Stil sehen, werden wir definitiv denken, dass die folgenden drei Daten ein Array sein müssen, das vom Hintergrund an zurückgegeben wird Frontend, und dann durchqueren wir es.

• Die erste Methode: Durchlaufen Sie das Array direkt auf der Seite und zeigen Sie dann die drei Datenelemente an.

• Die zweite Methode: Kapseln Sie eine Komponente nacheinander mit Daten und durchlaufen Sie diese Komponente dann auf der Seite.

In der tatsächlichen Entwicklung verwenden wir die zweite Methode. Niemand wird definitiv fragen, warum die erste Methode so einfach ist.

Grund:

Wenn ein Modul an mehreren Stellen angezeigt wird und Ihr Modul nur auf einer eigenen Seite geschrieben ist und auch an anderen Stellen benötigt wird, müssen Sie das Modul umschreiben aufwändig und mühsam.

Definieren wir also zunächst eine Komponente, nehmen wir das Obige als Beispiel:

Dateiname: 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>

Hauptseite: 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>

   

Verwandte Empfehlungen:

So erstellen und verwenden Sie Komponenten in vue.js

Einführung in Vue-Komponenten

Zwei Möglichkeiten, Komponenten in Vue zu erstellen

Das obige ist der detaillierte Inhalt vonBeispiele für die Verwendung von Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!