vue 面向对象,对vue组件的理解
用面向对象的思维理解Vue组件，可以把一切抽象成对象，而类或组件是有属性和操作的。本文主要介绍用面向对象的思想理解Vue组件的一种尝试。有需要的朋友可以参考一下。
当同一个函数，同一个HTML代码被多次使用时，可以考虑提取为一个组件。想用就调用，想改就传，这就是组件的好处。
什么是组件
用面向对象的思维理解Vue组件，可以把一切抽象成对象，而类或组件是有属性和操作的。
如果选择人类作为成分，其基本属性是姓名、年龄、国籍；基本的方法就是吃饭，睡觉，跑步等等。
脚本
导出默认值{
姓名：人，
道具：{
名称：{
类型：字符串，
必选：假，
默认值：“匿名”
},
年龄：{
类型：数量，
必选：假，
默认值：0
},
国家：{
类型：字符串，
必选：假，
默认：“地球人”
}
},
方法：{
吃(){
Consloe.log(吃)
},
sleep() {
Consloe.log (sleeping )
},
run() {
Consloe.log(运行)
}
}
}
/脚本
在面向对象中，构造函数可以初始化类的全局变量，所以这个方法也可以用在组件中。
Person :age=20 :name=晓明:country=中国/person
组件封装了数据和操作，有进有出。我们不需要关心组件中发生了什么，我们只需要结果和呈现的效果。
自定义事件
外界无法直接访问使用或访问组件的属性。我该怎么办？
使用$emit自定义事件，您可以从外界获取组件属性。
模板
.
按钮@ Click= handle Click Click/按钮
/模板
脚本
导出默认值{
姓名：人，
方法：{
handleClick() {
这个。$emit(getPerson ，{
年龄：this.age，
名称：this.name，
国家：这个国家
})
}
}
}
/脚本
调用外部组件时添加自定义函数@getPerson或v-on:click= get person
模板
差异
person:age= 20 :name= Xiaoming :country= Chinese @ get person= get person /person
/div
/模板
脚本
导出默认值{
名称：“测试”，
方法：{
getPerson(info) {
consloe.log(信息)
}
}
}
/脚本
实际案例
在web开发中，你可能会用到标签，你可能会认为标签在一个页面上不能用一次，而可能会用很多次。你也可以根据不同的情况定制一些宽度、高度和颜色。
因此，我们可以将与标签相关的HTML代码和CSS封装成组件，对外，我们公开宽度、高度和类型参数。使用的时候因为情况不同需要定制，传参数就行了。
模板
视角
:style={ width: width，height: height }
:class=[owl-tag- type]
owl-tag text-xs flex align-center justify-center
插槽/插槽
/查看
/模板
脚本
名称：“猫头鹰标签”，
道具：{
//可以传入的有效值是primary gray
类型：{
类型：字符串，
默认值：“主要”
},
宽度：{
类型：字符串，
必填：假
},
高度：{
类型：字符串，
必填：假
}
}
/脚本
风格。猫头鹰标签{
边框半径：8rpx
填充：6rpx 10rpx
}。owl标签-主要{
颜色：白色；
背景色：# 87cefa
}。猫头鹰标签-灰色{
颜色：# 81868a
背景色：# f0f1f5
}
/风格
当这些工作完成后，我们就定义了一个组件。想叫就叫，想改就传。这就是元器件的优势。
模板
猫头鹰标签
:type=主要
:height=45rpx
:width=120rpx
官方职位
/owl标签
/模板
将type的值改为灰色，效果如下：
到目前为止，这篇关于从面向对象的思想理解Vue组件的文章已经介绍到这里了。更多相关的Vue组件面向对象内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。