浅析从面向对象思维理解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组件面向对象内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了JS实现简单面向对象的颜色选择器,以完整实例形式分析了JavaScript基于面向对象实现颜色选择器的具体步骤与实现技巧,需要的朋友可以参考下...2016-04-23
- 用面向对象的思维去理解Vue组件,可以将所有的事物都抽象为对象,而类或者说是组件,都具有属性和操作。这篇文章主要介绍了尝试用面向对象思维理解Vue组件,需要的朋友可以参考下...2021-07-11
- 这篇文章主要介绍了个人对c# 面向对象的理解,算是一个入门篇吧,给需要的小伙伴参考下,抛砖引玉。...2020-06-25
- 这篇文章主要介绍了php面向对象之反射功能与用法,结合实例形式简单分析了php5面向对象反射的概念及具体用法,需要的朋友可以参考下...2017-04-03
- 今天小编就为大家分享一篇关于C#面向对象编程基础概念汇总的文章,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧...2020-06-25
- 本篇文章主要介绍了Javascript的面向对象,小编觉得这篇文章内容很不错,需要的朋友可以看下,希望能够给你带来帮助...2021-09-27
PHP面向对象开发之类中接口的应用(interface、implements)
php类中接口的应用关键字是interface、implements了,接口是一种成员属性全部为抽象或常量的特殊抽象类,下面我们看几个实例。 类中接口的应用 1.关键字:interface...2016-11-25- 这篇文章主要介绍了C#中面向对象编程机制之继承学习笔记,本文给出一个简单子实例讲解C#中的继承,并讲解了一些C#继承的知识技巧,需要的朋友可以参考下...2020-06-25
PHP的面向对象编程:开发大型PHP项目的方法(三)(转载)
PHP的面向对象编程:开发大型PHP项目的方法(三) 作者:Luis Argerich 译者:limodou 重载(与覆盖不同)在PHP中不支持。在OOP中,你可以重载一个方法来实现两个或重多的方法...2016-11-25- 在php中不支持多重继承,如果我们向使用多个类的方法而实现代码重用有什么办法么?那就是组合。在一个类中去将另外一个类设置成属性。 下面的例子,模拟了多重继承。 view s...2016-11-25
- 这篇文章主要介绍了Java面向对象基础,类,变量,方法,需要的朋友可以参考下...2020-10-03
- 这篇文章主要介绍了JavaScript基于面向对象之继承...2015-12-14
- 这篇文章主要为大家介绍了js面向对象编程,感兴趣的小伙伴们可以参考一下...2016-01-25
- 大多数类都有一种称为构造函数的特殊方法。当创建一个对象时,它将自动调用构造函 数,也就是使用new 这个关键字来实例化对象的时候自动调用构造方法。 构造函数的声...2016-11-25
- PHP 语言从诞生起,就具有了很好的面向过程编程的特性。只是在其进化过程中才逐渐加强了面向对象的特性,直到 PHP5.0,也才接近完善。一般来说,PHP 的初学者和...2016-11-25
- 下面小编就为大家带来一篇老生常谈PHP面向对象之命令模式(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-05-26
- 这篇文章主要介绍了Python面向对象封装操作,结合具体案例形式详细分析了Python面向对象的封装、扩展等操作技巧与相关注意事项,需要的朋友可以参考下...2020-05-06
- 这篇文章主要介绍了Python面向对象之继承原理与用法,结合具体案例形式分析了Python面向对象程序设计中继承的原理、使用方法及相关操作注意事项,需要的朋友可以参考下...2020-05-06
- 这篇文章主要介绍了JavaScript面向对象之七大基本原则,结合实例形式详细分析了JavaScript面向对象七大基本原则,包括单一职责、开闭原则、里氏替换、依赖倒置、接口隔离、迪米特法则及组合/聚合复用原则,需要的朋友可以参考下...2020-05-07
- 函数在面对对象的编程中又被叫做方法,会受到作用域的制约,Lua中具有类等面向对象的特性,接下来我们就来看一下Lua中函数与面向对象编程的基础知识整理...2020-06-30