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组件面向对象内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vue组件之间的通信(超详细的vue组件间通信总结)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue组件详解(Vue的方法和属性案例详解)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
- 宋轶除了演过于曼丽,原来还演过一个青楼女子(宋轶除了演过于曼丽)
- 赵丽颖第一部当女主的戏,主角配角个个都是实力演员(赵丽颖第一部当女主的戏)
- 乾隆为何这么喜爱白塔原因是什么(乾隆为何这么喜爱白塔原因是什么)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
热门推荐
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- 宝塔数据库不小心删了(宝塔面板MySQL数据库经常自动停止的解决方法)
- html标签的嵌套规则
- python如何获取微信好友(利用Python查看微信共同好友功能的实现代码)
- yii框架使用教程(Yii框架操作cookie与session的方法实例详解)
- docker的配置与使用(docker之docker-machine用法详解)
- Response.Expires的用法
- SVN提交时忽略bin和obj文件夹
- pyinstaller如何打包成exe文件(利用pyinstaller打包exe文件的基本教程)
- 谷歌云服务账号详解(谷歌云服务器一年到期后,怎么继续免费使用?)