What is a component

Object orientation abstracts everything as objects, and classes, or components, have properties and methods.

For example, if you extract a human as a component, the basic attributes are name, age, and nationality, and the basic methods are eating, sleeping, and running.

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

In object oriented, constructors can initialize the value of a property of a class; When using a component, you can also initialize the value of the component’s properties.

<person :age="20" :name="' Ming '" :country="' Chinese '"></person>
Copy the code

Custom event

What can I do if a component’s properties are not directly available or accessible to the outside world?

Using the $Emit custom event, you can get the component’s properties from the outside.

<template>.<button @click="handleClick">Click on the</button>
</template>

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

Add a custom function @getPerson or V-on :click=”getPerson” to the component when it is used by the outside world

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

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

The actual case

In web development, when you think about a tag, you might think that it’s not going to be used in one page, it might be used multiple times across multiple pages, and you might think that its width, height, color, and other attributes might change depending on the situation.

Therefore, we can encapsulate a piece of reused code into a component. The component provides properties such as width, height and type. When using the component, the value of the properties of the component can be changed according to different requirements.

<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: {
        // Pass 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>
Copy the code

Components are packaged and can be used or changed as desired. This is the benefit of components.

<template>
    <owl-tag
        :type="'primary'"
        :height="'45rpx'"
        :width="'120rpx'"
    >The official post</owl-tag>
</template>
Copy the code

Change the value of the type attribute to gray. The effect is as follows: