Vue组件(Component)

简介: Vue组件(Component)



组件(Component)是Vue最核心的功能部分,也是整个框架设计最精彩的地方,当然也是比较难掌握的。每个开发者都想在软件开发过程中使用之前写好的代码,但又担心引入这段代码会对现有的程序产生影响。Web Components的出现提供了一种新的思路,可以自定义tag标签,并拥有自身的模板、样式和交互。

什么是组件

在正式介绍组件前,先看一个Vue组件的简单示例感受一下,代码如下:

组件是可复用的Vue实例,且带有一个名字,在这个示例中组件名字是button-counter 。可以在一个通过new Vue创建的Vue根实例中,把这个组件作为自定义标签来使用,代码如下:

Web的组件其实就是页面组成的一部分,好比是计算机中的每一个硬件(如硬盘、键盘、鼠标等),它具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,从而变成一个完整的应用。

Web页面就是由一个个类似这样的部分组成的,例如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大且复杂的页面分成粒度合理的页面组成部分。

使用组件的好处:

(1)提高开发效率。

(2)方便重复使用。

(3)简化调试步骤。

(4)提升整个项目的可维护性。

(5)便于协同开发。

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以以原生HTML元素的形式存在,以is特性扩展。

组件系统让我们可以用独立可复用的小组件构建大型应用,几乎任意类型应用的界面可以抽象为一个组件树,如图

组件的基本使用

为了能在模板中使用,这些组件必须先注册以便Vue能够识别。这里有两种组件的注册类型:全局注册和局部注册。

全局注册

全局注册需要确保在根实例初始化之前注册,这样才能使组件在任意实例中被使用。全局注册有3种方式。

要注册一个全局组件,我们可以使用Vue.component(tagName,options),代码如下:

Vue.component('my-component',{
  //选项
})

my-component就是注册组件的自定义标签名称,推荐使用小写字母加“-”分隔符的形式命名。组件在注册之后,便可以在父实例的模块中以自定义元素的形式使用,示例代码如下:

注意:

(1)template的DOM结构必须被一个而且是唯一根元素所包含,直接引用而不被“div /div ”包裹是无法被渲染的。

(2)模板(template)声明了数据和最终展现给用户的DOM之间的映射关系。

除了template选项外,组件中还可以像Vue实例那样使用其他的选项(5.3节将详细讲解),例如data、computed、methods等,但是在使用data时和实例不同,data必须是函数,然后将数据利用return返回,代码如下:

Vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其他实例也会受影响。

上面解释了data不能为对象的原因,这里简单地讲一下data为函数的原因。data为函数,通过return返回对象的复制,致使每个实例都有自己独立的对象,实例之间可以互不影响地改变data属性值。

使用Vue.extend配合Vue.component方法,代码如下:

将模板字符串定义到script标签中,代码如下:

同时,需要使用Vue.component定义组件,代码如下:

Vue.component('account',{
      template:'#tmpl'
    });

完整示例代码如下:

局部注册

如果不需要全局注册或者只让组件使用在其他组件内,可以采用选项对象的components属性实现局部注册,示例代码如下:

DOM模板解析说明

当使用DOM作为模版时(例如,将el选项挂载到一个已存在的元素上),会受到HTML的一些限制,因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素ul 、ol 、table 、select 限制了能被它包裹的元素,而一些像option 这样的元素只能出现在某些其他元素内部。

在自定义组件中使用这些受限制的元素时会导致一些问题,例如:

自定义组件有时被认为是无效的内容,因此在渲染的时候会导致错误。这是因为使用特殊的is属性来挂载组件,代码如下:

也就是说,在标准HTML中,一些元素只能放置特定的子元素,而另一些元素只能存在于特定的父元素中。例如table中不能放置div,tr的父元素不能为div等。所以,当使用自定义标签时,标签名还是那些标签的名字,但是可以在标签的is属性中填写自定义组件的名字,

示例执行效果如图

从图中不难发现直接引用my-row 组件标签并没有被table 标签包裹,而用is特殊属性挂载的组件可以达到所需效果。注意:如果使用的是字符串模板,则不受限制。

目录
相关文章
|
1天前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能:VS Code或WebStorm作为代码编辑器,Node.js与npm管理依赖,Git操作仓库。基础包括JavaScript、ES6+语法、前端知识(HTML/CSS/浏览器原理)及Vue基础知识。进阶则需源码阅读理解能力,调试技巧,熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
17 8
|
1天前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript(ES6+)和前端工程化。从源码入口文件开始,研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理,实践编写Vue插件,参与开源项目,阅读相关文章教程,持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
7 1
|
1天前
|
JavaScript 前端开发
鼠标监视 | 拖拽方块 | Vue
鼠标监视 | 拖拽方块 | Vue
5 0
|
1天前
|
JavaScript
Vue控制是否禁用disabled属性
Vue控制是否禁用disabled属性
6 1
|
1天前
|
JavaScript 前端开发
Vue鼠标悬浮切换图片
Vue鼠标悬浮切换图片
5 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
982 0
|
1天前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!
|
1天前
|
JavaScript 前端开发 UED
动画效果:给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能,增强用户体验,创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡,开发者能实现多样化效果。同时,结合组件状态、关注性能并测试优化,确保在不同设备上运行良好,打造引人入胜的应用交互。
|
4天前
|
JavaScript
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
10 0
|
4天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
12 0