Exemples d'utilisation des composants vue

Cet article présente principalement comment utiliser les composants vue avec des exemples. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Lors du développement du projet, il nous est nécessaire d'encapsuler certains modules publics dans des composants.

Par exemple, l'image suivante :

En voyant ce style, nous penserons certainement que les trois données suivantes doivent être un tableau renvoyé de l'arrière-plan vers le front end, puis nous le traversons.

• La première méthode : Parcourez le tableau directement sur la page, puis affichez les trois données.

• La deuxième méthode : Encapsulez le composant un par un avec des données, puis parcourez ce composant sur la page.

Dans le développement réel, nous utilisons la deuxième méthode. Personne ne demandera certainement, la première méthode est si simple, pourquoi utiliser la deuxième méthode.

Raison :

Si un module est affiché à plusieurs endroits et que votre module n'est écrit que dans sa propre page et est également nécessaire à d'autres endroits, alors vous devez réécrire le module Time. consommatrice et laborieuse.

Définissons d'abord un composant, prenons ce qui précède comme exemple :

Nom du fichier : aujourd'huiHou.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>

Page principale : 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>

   

Recommandations associées :

Comment créer et utiliser des composants dans vue.js

Introduction aux composants Vue

Deux façons de créer des composants dans Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!