标签：mic   radius   使用   状态   关系   大小   hit   fonts   handle   

什么是组件和面向对象？

面向对象是一种对现实世界理解和抽象的方法。一切事物皆对象，通过面向对象的方式，将现实世界的事物抽象成对象，现实世界中的关系抽象成类、继承，帮助人们实现对现实世界的抽象与数字建模。

Vue官方文档对组件的讲解貌似不太友善，网络上的许多讲解似乎也是以Vue官方文档的视角去看待组件的，如果你学了Java、C#等面向对象编程语言，以这些语言的视角去理解Vue组件，其实多少能意识到组件这一概念和面向对象编程的方式和风格相似。

类是具有相同特性（数据元素）和行为（功能）的对象的抽象。类具有属性，它是对象的状态的抽象；类具有操作，它是对象的行为的抽象。

将这句话中的“类”换成“组件”，来看看会发生什么样的变化？↓ ↓ ↓

组件是具有相同特性（数据元素）和行为（功能）的对象的抽象。组件具有属性，它是对象的状态的抽象；组件具有操作，它是对象的行为的抽象。

将“类”与“组件”置换之后，如果没有感觉违和，恭喜你，已经对组件有了深刻的认识。

在使用Java类时，可以在new对象时通过构造函数传递参数，而在使用组件时，可以通过props传递参数（props用于父组件传递子组件时用到的属性）。

以实例理解组件的含义

以Vue视角理解组件

这是ThorUI组件库中封装好的tui-button.vue的源码：

<template>
    <button
            class="tui-btn"
            :style="{
				width: width,
				height: height,
  				lineHeight: height,
				fontSize: size + ‘rpx‘,
				margin: margin
            }"
            @tap="handleClick"
            >
        <slot></slot>
    </button>
</template>

在:style中有两个可自定义的属性width和height

props: {
        // 宽度 rpx 或 %
        width: {
            type: String,
            default: ‘100%‘
        },
        // 高度 rpx
        height: {
            type: String,
            default: ‘96rpx‘
        }
}

在使用组件时可以为这两个参数传递值来设置按钮的高和宽

<tui-button
	:height="‘75rpx‘"
    :width="‘150rpx‘"
>
    登录
</tui-button>

以Java视角理解组件

我们现在来设计一个Button类，其属性包含了有width和height。

package components;

public class Button {

    // 宽度 rpx 或 %
    private String width;
    // 高度 rpx
    private String height;

    public Button() {
    }

    public Button(String width, String height) {
        this.width = width;
        this.height = height;
    }

    public String getWidth() {
        return width;
    }

    public void setWidth(String width) {
        this.width = width;
    }

    public String getHeight() {
        return height;
    }

    public void setHeight(String height) {
        this.height = height;
    }

}

在使用Button类时，通过构造函数来设置width和height的值

Button button = new Button("75rpx", "150rpx");

什么情况下抽取组件？

在多次使用到相同的函数和相同的html代码片段时，可以考虑抽取为组件，并提供一些props，当使用组件时，可以通过props对组件进行自定义设置。

实际案例

在许多网页中可以看到这些标签组件，如果我们自己不封装组件，在每次使用的地方都来写重复的view标签、css代码，不会觉得繁琐吗？

所以，我们把这些重复的html和css全部抽取到一个组件中去，并为这个组件命名一个独一无二且漂亮的名字，在不同的情况下设置props改变标签的大小、颜色等。

<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>

现在，我们将基本的结构写好了，然后绑定一些style和class类，在使用组件时，传入width和height之后会设置组件的高和宽，在传入type后，会设置组件的颜色。

props中给出的属性如下：

<script>
    name: ‘owl-tag‘,
    props: {
        // 可传入有效值为 primary | gray
        type: {
            type: String,
                default: ‘primary‘
        },
        width: {
            type: String,
            required: false
        },
        height: {
            type: String,
            required: false
        }
    }
</script>

在style中写出传入type时对应的css样式

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

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

.owl-tag-gray {
    color: #81868a;
    background-color: #f0f1f5;
}

这些工作做好了，一个组件就被我们定义好了，以后想用标签，在template中就这样使用

<owl-tag
	:type="‘primary‘"
	:height="‘45rpx‘"
	:width="‘120rpx‘"
>
    官方帖
</owl-tag>

改变type的值为gray，呈现的效果如下

什么是Vue组件以及如何定义组件？(结合面向对象理解Vue组件)

标签：mic   radius   使用   状态   关系   大小   hit   fonts   handle   

原文地址：https://www.cnblogs.com/kongsam/p/14694153.html