대상 을 대상 으로 하 는 사고 에서 Vue 구성 요 소 를 이해 하 는 것 을 분석 하 다.

같은 함수 와 같은 HTML 코드 를 여러 번 사용 할 때 구성 요소 로 추출 하 는 것 을 고려 할 수 있 습 니 다.사용 하고 싶 으 면 호출 하고,고치 고 싶 으 면 인삼 을 전달 하 는 것 이 구성 요소 의 좋 은 점 입 니 다.
구성 요소
대상 을 대상 으로 하 는 사고 로 Vue 구성 요 소 를 이해 하면 모든 사물 을 대상 으로 추상 화 할 수 있 고 유형 이나 구성 요 소 는 속성 과 조작 을 가진다.
예 를 들 어 인 류 를 구성 요소 로 추출 하면 그 기본 적 인 속성 은 이름,연령,국적 이 있다.기본 적 인 방법 으로 는 식사,잠,달리기 등 이 있다.

<script>
export default {
    name: 'person',
    props: {
        name: {
            type: String,
            required: false,
            default: '   '
        },
        age: {
            type: Number,
            required: false,
            default: 0
        },
        country: {
            type: String,
            required: false,
            default: '   '
        }
    },
    methods: {
        eat() {
            consloe.log('  ')
        },
        sleep() {
            consloe.log('  ')
        },
        run() {
            consloe.log('  ')
        }
    }
}
</script>

대상 을 대상 으로 하 는 구조 함 수 는 클래스 에 전역 변 수 를 초기 화 할 수 있 기 때문에 이러한 방식 은 구성 요소 에 도 사용 할 수 있 습 니 다.

<person :age="20" :name="'  '" :country="'   '"></person>

구성 요 소 는 데이터 와 조작 을 봉 인 했 습 니 다.들 어 오 면 나 오 는 것 이 있 습 니 다.우 리 는 구성 요소 에서 무슨 일이 일 어 났 는 지 에 관심 을 가지 지 않 아 도 됩 니 다.우 리 는 결과 와 나타 나 는 효과 만 있 으 면 됩 니 다.
사용자 정의 이벤트
외부 에서 구성 요소 의 속성 에 직접 접근 하거나 접근 할 수 없습니다.어떻게 해 야 합 니까?
$emit 사용자 정의 이 벤트 를 사용 하면 외부 에서 구성 요소 속성 을 가 져 올 수 있 습 니 다.

<template>
    ...
    <button @click="handleClick">  </button>
</template>

<script>
export default {
    name: 'person',
    methods: {
        handleClick() {
            this.$emit('getPerson', {
                age: this.age,
                name: this.name,
                country: this.country
            })
        }
    }
}
</script>

외부 에서 구성 요 소 를 호출 할 때 사용자 정의 함수 추가@getPerson또는v-on:click="getPerson"

<template>
    <div>
        <person :age="20" :name="'  '" :country="'   '" @getPerson="getPerson"></person>
    </div>
</template>

<script>
export default {
    name: 'test',
    methods: {
        getPerson(info) {
            consloe.log(info)
        }
    }
}
</script>

실제 사례

웹 개발 에 서 는 탭 을 사용 할 수 있 으 며,탭 이 한 페이지 에서 한 번 사용 할 수 없고,여러 번 사용 할 수 있다 고 생각 할 수 있 습 니 다.상황 에 따라 너비,높이,색상 을 정의 할 수도 있다.
따라서 태그 와 관련 된 HTML 코드 와 CSS 를 구성 요소 에 밀봉 할 수 있 습 니 다.대외 적 으로 width,height,type 인 자 를 노출 할 수 있 습 니 다.사용 할 때 상황 에 따라 사용자 정의 가 필요 하 므 로 인 자 를 전달 하면 됩 니 다.

<template>
    <view
        :style="{ width: width, height: height }"
        :class="['owl-tag-' + type]"
        class="owl-tag text-xs flex align-center justify-center"
    >
        <slot></slot>
    </view>
</template>

<script>
    name: 'owl-tag',
    props: {
        //         primary | gray
        type: {
            type: String,
            default: 'primary'
        },
        width: {
            type: String,
            required: false
        },
        height: {
            type: String,
            required: false
        }
    }
</script>

<style>
.owl-tag {
    border-radius: 8rpx;
    padding: 6rpx 10rpx;
}

.owl-tag-primary {
    color: white;
    background-color: #87cefa;
}

.owl-tag-gray {
    color: #81868a;
    background-color: #f0f1f5;
}
</style>

이 일 들 이 잘 되면 하나의 구성 요소 가 우리 에 의 해 정의 된다.사용 하고 싶 으 면 호출 하고,고치 고 싶 으 면 인삼 을 전달 하 는 것 이 구성 요소 의 좋 은 점 입 니 다.

<template>
    <owl-tag
        :type="'primary'"
        :height="'45rpx'"
        :width="'120rpx'"
    >
           
    </owl-tag>
</template>

type 의 값 을 gray 로 바 꾸 면 다음 과 같은 효과 가 나타 납 니 다.

대상 을 대상 으로 하 는 사고 에서 Vue 구성 요 소 를 이해 하 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 구성 요소 가 대상 을 대상 으로 하 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 사랑 해 주세요!