详解vue组件基础


Posted in Javascript onMay 04, 2018

什么是组件

组件(Component)是对数据和方法的简单封装。web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航、列表、弹窗、下拉菜单等。页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。、前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的小东西。

使用提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。

vue作为一个轻量级前端框架,其核心就是组件化开发。

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

vue中,组件是可复用的 Vue 实例。因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件注册

全局注册

通过 Vue.component 来创建组件:

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

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如:

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

<div id="app">
 <component-a></component-a>
 <component-b></component-b>
 <component-c></component-c>
</div>

在所有子组件中也是如此,也就是说这三个组件在各自内部也都可以相互使用。

局部注册

全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件:

new Vue({
 el: '#app'
 components: {
 'component-a': ComponentA,
 'component-b': ComponentB
 }
})

对于 components 对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用。例如,如果你希望 ComponentA 在 ComponentB 中可用,则你需要这样写:

var ComponentA = { /* ... */ }

var ComponentB = {
 components: {
 'component-a': ComponentA
 },
 // ...
}

使用Babel和webpack中的注册组件

import ComponentA from './ComponentA.vue'

export default {
 components: {
 ComponentA
 },
 // ...
}

注意在 ES2015+ 中,在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写,即这个变量名同时是:

用在模板中的自定义元素的名称
包含了这个组件选项的变量名

基础组件的自动化全局注册

没看懂。

data 必须是一个函数

data: {
 count: 0
}

这样定义的data中的变量是全局变量,在使用组件时,在一个组件中修改变量的值,会影响到所有组件中该变量的值。为避免变量干扰,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

data: function () {
 return {
 count: 0
 }
}

动态组件

在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里:

详解vue组件基础

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现:

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存!-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素,诸如 <ul>、<ol>、<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:

<table>
 <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法:

<table>
 <tr is="blog-post-row"></tr>
</table>
Javascript 相关文章推荐
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 #Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
Vue.js 踩坑记之双向绑定
May 03 #Javascript
Vue利用canvas实现移动端手写板的方法
May 03 #Javascript
Node.Js中实现端口重用原理详解
May 03 #Javascript
原生JS实现的雪花飘落动画效果
May 03 #Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 #Javascript
You might like
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python实现一个猜拳游戏
2020/04/05 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
校长就职演讲稿
2014/01/06 职场文书
更夫岗位责任制
2014/02/11 职场文书
普通话演讲稿
2014/09/03 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2015年林业工作总结
2015/05/14 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS