什么是组件

以Java、C#等面向对象编程语言的角度去理解Vue组件,能够发现组件和面向对象编程的方式和风格很相似。一切事物皆为对象,通过面向对象的方式,将现实世界的事物抽象成对象,现实世界中的关系抽象成类、继承。

在面向对象编程语言中,类(组件)具有属性,它是对象的状态的抽象;类(组件)具有操作,它是对象的行为的抽象。

将“类”与“组件”置换之后,如果没有感觉违和,恭喜你,已经对组件有了深刻的认识。

比如将人类这一对象抽取为一个组件,基本的属性有:姓名、年龄、国籍;基本的方法有:吃饭、睡觉、跑步等。

对外我们需要暴露(getter)姓名、年龄、国籍三个属性,并可以由外部对组件属性进行初始化(setter)。

<template>
<div class="person">
<div>{{ name }} + {{ age }} + {{ country }}</div>
<button @click="eat">点击</button>
</div>
</template> <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>

对外公开接口,将数据与操作数据的源代码进行有机的结合,形成“组件”,其中数据和函数都是组件的成员。

因为组件已经封装了数据以及操作数据的过程,所以我们不需要关注组件内部的方法是如何实现的,或者说,我们不用关心组件内发生了什么,我们只需要给它数据,而它给我们结果就行。

自定义事件

但是,外部不可以直接访问属性值,如果我想获取person组件相关的属性,该如何做?

答案是使用$emit自定义事件

修改button的点击事件函数:

<button @click="handleClick">点击</button>

添加处理点击事件的函数:

export default {
name: 'person',
methods: {
handleClick() {
this.$emit('getAll', {
age: this.age,
name: this.name,
country: this.country
})
}
}
}

在使用组件时,对组件添加自定义函数@getAll

<template>
<div>
<person :age="20" :name="'小明'" :country="'中国人'" @getAll="getAll"></person>
</div>
</template> <script>
export default {
name: 'test',
methods: {
getAll(info) {
consloe.log(info)
}
}
}
</script>

测试代码提取地址,提取码:pvcq

实际案例

在网页开发中,你可能会用到标签,而你可能会想到标签不可能在一个页面使用一次,可能是多次使用到。你还可能会想到可能会因为不同的情况而设置不一样的颜色。

那么就可以将标签相关的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组件的更多相关文章

  1. 深入理解 Vue 组件

    深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...

  2. 尝试用面向对象思维理解Vue组件

    什么是组件 用面向对象的思维去理解Vue组件,可以将所有的事物都抽象为对象,而类或者说是组件,都具有属性和操作. 如抽取人类为组件,其基本的属性有姓名.年龄.国籍:基本的方法有吃饭.睡觉.跑步等. & ...

  3. 深入理解Vue组件3大核心概念

    摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...

  4. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  5. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  6. 第四章、深入理解vue组件

    4-1.使用组件的细节 a.使用is解决html出现bug 如下 table下面应该为tr,所以页面渲染的时候没有找到tr是有问题的,所以是有小bug,所以table中必须是tr b.改上面bug,t ...

  7. 深刻理解Vue中的组件

    转载:https://segmentfault.com/a/1190000010527064 --20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法,为了不误导大家,我把插槽的内 ...

  8. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  9. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

随机推荐

  1. 配置mysql数据库时出再错误:LookupError: No installed app with label 'admin'.

    版本: windows10+py37+django2.2 错误: 项目启动时出现,No installed app with label 'admin' 解决办法: 安装最新的 pip install ...

  2. Python3+pygame实现的俄罗斯方块 代码完整 有演示效果

    一.简单说明 80.90后的小伙伴都玩过"俄罗斯方块",那种"叱咤风云"场景 偶尔闪现在脑海 真的是太爽了:如果没有来得及玩过的同学,这次可以真正的自己做一个了 ...

  3. 别再恐惧 IP 协议(万字长文 | 多图预警)

    尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 「CS-Wiki」Gitee ...

  4. 《C++ Primer》笔记 第13章 拷贝控制

    拷贝和移动构造函数定义了当用同类型的另一个对象初始化本对象时做什么.拷贝和移动赋值运算符定义了将一个对象赋予同类型的另一个对象时做什么.析构函数定义了当此类型对象销毁时做什么.我们称这些操作为拷贝控制 ...

  5. 【HTB系列】 靶机Swagshop的渗透测试详解

    出品|MS08067实验室(www.ms08067.com) 本文作者:是大方子(Ms08067实验室核心成员) 总结与反思 使用vi提权 magento漏洞的利用 magescan 工具的使用 靶机 ...

  6. 剑指 Offer 14- I. 剪绳子 + 动态规划 + 数论

    剑指 Offer 14- I. 剪绳子 题目链接 还是343. 整数拆分的官方题解写的更清楚 本题说的将绳子剪成m段,m是大于1的任意一个正整数,也就是必须剪这个绳子,至于剪成几段,每一段多长,才能使 ...

  7. Fastjson1.2.24RCE漏洞复现

    Fastjson1.2.24RCE漏洞复现 环境搭建 这里用的Vulhub靶场 cd /vulhub/fastjson/1.2.24-rce docker-compose up -d 报错 ERROR ...

  8. CRLF注入漏洞 -配置错误

    漏洞分析参考 https://i-beta.cnblogs.com/posts/edit 什么是CRLF? CRLF 指的是回车符(CR,ASCII 13,\r,%0d) 和换行符(LF,ASCII ...

  9. AtCoder Beginner Contest 190

    A Very Very Primitive Game int main() { int a, b, c; cin >> a >> b >> c; if(c == 0 ...

  10. python基础(8)python中is和==的区别详解

    前置知识点 当我们创建一个对象时,我们要知道它内部干了些什么 1.创建了一个随机id,开辟了一片内存地址 2.自动声明了这个对象的类型type 3.给这个对象赋值value 小例子 a = 1 pri ...