vue基础语法对象(浅析从面向对象思维理解Vue组件)
类别:编程学习 浏览量:457
时间:2021-10-09 00:25:34 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> <li> <person :age="20" :name="'小明'" :country="'中国人'" @getPerson="getPerson"></person> </li> </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基础语法对象(浅析从面向对象思维理解Vue组件)
- vue组件之间的通信(超详细的vue组件间通信总结)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue组件详解(Vue的方法和属性案例详解)
- 使用vue组件开发项目(Vue记事本实例详解)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
热门推荐
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- Asp.net导出Excel乱码
- dedecms点击量(dedecms生成速度超级优化攻略 从50秒20页到0.72秒20页)
- html5app开发用什么平台(Html5与App的通讯方式详解)
- python响应处理post请求(Python3模拟curl发送post请求操作示例)
- idea安装mybatis(IDEA使用mybatis-generator及配上mysql8.0.3版本遇到的bug)
- vue怎么引入axios(如何用vue封装axios请求)
- JQuery中serialize与serializeArray
- SQL Server 2008中的时间数据类型
- python发送钉钉消息(钉钉群自定义机器人消息Python封装的实例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9