Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to understand Vue components from object-oriented thinking". The content of the explanation is simple and clear, and it is easy to learn and understand. please follow the editor's train of thought to study and learn "how to understand Vue components from object-oriented thinking".

What are components?

To understand Vue components with object-oriented thinking, all things can be abstracted into objects, and classes or components have properties and operations.

Such as extracting human as a component, its basic attributes are name, age, nationality; the basic methods are eating, sleeping, running and so on.

Export default {name: "person", props: {name: {type: String, required: false, default: "John Doe"}, 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")}

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

Components encapsulate data and operations, in and out, we don't care about what's going on in the component, we just need the results and the results.

Custom event

What should I do if the outside world cannot directly access the properties of a component that is used or accessed?

Using the $emit custom event, you can get component properties from the outside world.

... Click export default {name: "person", methods: {handleClick () {this.$emit ("getPerson", {age: this.age, name: this.name, country: this.country})}

Add a custom function @ getPerson or vmuronlug Click = "getPerson" when calling a component from the outside

Export default {name: "test", methods: {getPerson (info) {consloe.log (info)} actual case

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

So you can encapsulate the tag-related HTML code and CSS into the component, and externally, we expose the width, height, and type parameters. When using it, you need to customize it because of different circumstances, so you can pass the parameters.

Name: "owl-tag", props: {/ / valid values are primary | gray type: {type: String, default: "primary"}, width: {type: String, required: false}, height: {type: String Required: false}}. Owl-tag {border-radius: 8rpx Padding: 6rpx 10rpx;} .owl-tag-primary {color: white; background-color: # 87cefa;} .owl-tag-gray {color: # 81868a; background-color: # f0f1f5;}

Once this work is done, a component is defined by us. Call it if you want to use it, and pass parameters if you want to change it. This is the advantage of components.

Official post

Change the value of type to gray, and the effect is as follows:

Thank you for your reading, the above is the content of "how to understand Vue components from object-oriented thinking". After the study of this article, I believe you have a deeper understanding of how to understand Vue components from object-oriented thinking. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.