浅析从面向对象思维理解Vue组件
更新时间：2021年07月10日 08:40:12 作者：shiramashiro
用面向对象的思维去理解Vue组件，可以将所有的事物都抽象为对象，而类或者说是组件，都具有属性和操作。这篇文章主要介绍了尝试用面向对象思维理解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组件面向对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue异步请求数据重新渲染方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
本文主要介绍了vue实现列表拖拽排序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要给大家介绍了关于Vite使用报错解决方法的相关资料,这篇文中通过图文以及代码将遇到的一些报错介绍的非常详细,对大家学习或者使用vite具有一定的借鉴价值,需要的朋友可以参考下2023-08-08
解决vue props传Array/Object类型值,子组件报错的情况
这篇文章主要介绍了解决vue props传Array/Object类型值,子组件报错的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue实现超过两行显示展开收起的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
单元测试是用来测试项目中的一个模块的功能，本文主要介绍了前端Vue单元测试入门教程，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了vue中table多选/单选行,获取其数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue实现后台管理权限系统及顶栏三级菜单显示功能，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了如何利用Vue编写一个数字华容道游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
详解vue-cli快速构建项目以及引入bootstrap、jq
本篇文章主要介绍了vue-cli快速构建项目以及引入bootstrap、jq，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论