A brief analysis of understanding Vue components from an object-oriented perspective

When the same function and HTML code are used multiple times, you can consider extracting them into components. The advantage of components is that you can call them when you want to use them and pass parameters when you want to change them.

What are components

Using object-oriented thinking to understand Vue components, you can abstract all things into objects, and classes or components have properties and operations.

For example, if we extract humans as components, their basic attributes include name, age, and nationality; their basic methods include eating, sleeping, running, etc.

<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: 'Earthlings'
        }
    },
    methods: {
        eat() {
            consloe.log('eating')
        },
        sleep() {
            consloe.log('sleep')
        },
        run() {
            consloe.log('running')
        }
    }
}
</script>

In object-oriented programming, constructors can initialize global variables for classes, so this approach can also be used in components.

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

Components encapsulate data and operations. What goes in must come out . We don’t need to care about what happens inside the component. We only need the results and the effects presented.

Custom Events

What should I do if the outside world cannot directly access the properties of a component?

Using $emit custom events, you can obtain component properties from the outside world.

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

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

When the external component is called, add a custom function @getPerson or v-on:click="getPerson"

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

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

Actual Cases

In web development, you may use tags, and you may think that tags may not be used once in a page, but may be used multiple times. You might also want to customize some widths, heights, and colors for different situations.

Therefore, we can encapsulate the HTML code and CSS related to the tag into the component, and expose the width, height and type parameters to the outside world. When using it, if you need to customize it due to different situations, just pass the parameters.

<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: {
        // The valid value that can be passed in is 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>

Once these tasks are completed, a component has been defined. You can call it when you want to use it, and pass parameters when you want to change it. This is the benefit of components.

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

Changing the value of type to gray will result in the following effect:

This concludes this article on understanding Vue components from the perspective of object-oriented thinking. For more relevant Vue component object-oriented content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!