详解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跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
JS 数字转换研究总结
Dec 26 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
node.js 如何监视文件变化
Sep 01 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 可阅读随机字符串代码
2010/05/26 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
js实现文字滚动效果
2016/03/03 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
React组件的三种写法总结
2017/01/12 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python之文件读取一行一行的方法
2018/07/12 Python
python 调用有道api接口的方法
2019/01/03 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python中断多重循环的思路总结
2019/10/04 Python
python 等差数列末项计算方式
2020/05/03 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
Python中Selenium模块的使用详解
2020/10/09 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
公司联欢晚会主持词
2014/03/22 职场文书
实习单位鉴定评语
2014/04/26 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
团组织推优材料
2014/12/29 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
七年级作文之英语老师
2019/10/28 职场文书