什么是组件

以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. oracle之用户

    命令都是在命令行窗口执行 创建用户 1)登陆管理员用户 sqlplus system/密码 sqlplus system/briup 注意不要以分号结尾 2)创建用户 create user 用户名 ...

  2. 微信小程序:优化页面要渲染的属性

    问题:页面中只用到四个属性:goods_name,goods_price,goods_introduce,pics,但是整个对象中有22个属性,小程序中建议:data中只存放标签中要使用的数据,而现在 ...

  3. Spirng 循环依赖报错:Requested bean is currently in creation: Is there an unresolvable circular reference?

    1:前言 最近在项目中遇到了一次循环依赖报错的问题,虽然解决的很快,但是有些不明白的地方,特此记录. 在此我把 bean 的结构和 注入方式单独拎出来进行演示 1.1:报错提示 1.2:错误日志 Ex ...

  4. Django-用户权限,用户角色使用指南

    RBAC(Role-Based Access Control,基于角色的访问控制)就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用户 ...

  5. go 在crontab里面运行报错 解决方案

    问题背景 你高高兴兴的写好了一个go脚本,放到你的服务器上,打算定期运行这个脚本,你打开crontab -e, 然后输入: */1 * * * * go run /root/test/main.go ...

  6. dom_bom学习

    1. bom是什么? browser object model(浏览器对象模型) 在浏览器中 window指的就是bom对象 //网页重定向 // window.location.href=" ...

  7. Java 运行时数据区和内存模型

    运行时数据区是指对 JVM 运行过程中涉及到的内存根据功能.目的进行的划分,而内存模型可以理解为对内存进行存取操作的过程定义.总是有人望文生义的将前者描述为 "Java 内存模型" ...

  8. SQL练习——LeetCode解题和总结(1)

    只用于个人的学习和总结. 178. Rank Scores 一.表信息 二.题目信息 对上表中的成绩由高到低排序,并列出排名.当两个人获得相同分数时,取并列名次,且名词中无断档. Write a SQ ...

  9. java常见面试题2:求出两个正整数的最大公约数

    概念: 最大公约数:两个整数共有因子中最大的一个 方法一: 如果两个数相等,则最大公约数为它本身,两个数不等,则用两个数依次除 两个数中最小的一个到 1,直到找到同时能被两个数除尽的那个数 代码清单: ...

  10. 新动能 · 新机遇:SaaS软件提供商 Zoho 25 周年战略再升级

    25年,在历史的长河中不过转眼一瞬:但是对于创造者来说,25年足以颠覆一个时代...... 作为世界级云应用服务商,Zoho已经走过了25年的砥砺岁月.从ManageEngine到Zoho云服务,从工 ...