Vue 컴포넌트 사용 방법의 예

이 글은 주로 vue 컴포넌트의 사용법을 예제와 함께 소개하고 있습니다. 에디터가 꽤 괜찮다고 생각해서 이제 공유하고 참고용으로 올려보겠습니다. 에디터를 따라가며 살펴보겠습니다

프로젝트 개발에서는 일부 공용 모듈을 컴포넌트로 캡슐화하는 것이 필요합니다.

예를 들어 아래 그림은

이 스타일을 보면 다음 세 가지 데이터가 반드시 백그라운드에서 프런트 엔드로 반환된 배열이어야 하고 이를 순회할 수 있다고 생각할 것입니다.

• 첫 번째 방법: 페이지에서 직접 배열을 탐색한 다음 세 가지 데이터 조각을 표시합니다.

• 두 번째 방법: 하나의 데이터로 구성 요소를 캡슐화한 다음 페이지에서 이 구성 요소를 탐색합니다.

실제 개발에서는 두 번째 방법을 사용하는데, 첫 번째 방법이 이렇게 간단한데 왜 두 번째 방법을 사용하는지 아무도 묻지 않을 겁니다.

이유:

모듈이 여러 위치에 표시되고 모듈이 자체 페이지에만 작성되고 다른 위치에도 필요한 경우 모듈을 다시 작성해야 하므로 시간이 많이 걸리고 노동 집약적입니다. .组 위의 예는 다음과 같습니다.

파일 이름: todayhou.vue

rreee

홈페이지: home.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>

관련 권장 사항:

Vue.js 방법 구성 요소 생성 및 사용 Vue 구성 요소 소개

Vue에서 구성 요소를 만드는 두 가지 방법

위 내용은 Vue 컴포넌트 사용 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!