Examples of how to use vue components

This article mainly introduces how to use vue components with examples. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor and take a look.

In project development, it is necessary for us to encapsulate some public modules into components.

For example, the picture below:

Seeing this style, we will definitely think that the following three pieces of data must be an array returned from the background to the front end, and then we traverse it.

• The first method: Traverse the array directly on the page, and then display the three pieces of data.

• Second method: Encapsulate a component with one piece of data, and then traverse this component on the page.

In actual development, we use the second method. No one will definitely ask, why use the second method when the first method is so simple.

Reason:

If a module is displayed in multiple places, and your module is only written in its own page and is also needed in other places, then you need to rewrite the module. Time-consuming.

So we first define a component, taking the above as an example:

File name: 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>

Main page: 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>

Related recommendations:

How to create and use components in vue.js

Introduction to vue components

Two ways to create components in Vue

The above is the detailed content of Examples of how to use vue components. For more information, please follow other related articles on the PHP Chinese website!