强大Vue.js组件浅析


Posted in Javascript onSeptember 12, 2016

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

如何注册组件?

需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。Vue.extend方法格式如下: 

var MyComponent = Vue.extend({
 // 选项...后面再介绍
})

如果想要其他地方使用这个创建的组件,还得个组件命个名: 

Vue.component('my-component', MyComponent) 

命名之后即可在HTML标签中使用这个组件名称,像使用DOM元素一样。下面来看看一个完整的组件注册和使用例子。

html代码: 

<div id="example">
 <my-component></my-component>
</div>

js代码: 

// 定义
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
 el: '#example'
})

输出结果:

<div id="example">
 <div>A custom component!</div>
</div

嵌套组件
组件本身也可以包含组件,下面的parent组件就包含了一个命名为child-component组件,但这个组件只能被parent组件使用: 

var child = Vue.extend({
 template: '<div>A custom component!</div>'
});
var parent = Vue.extend({

 template: '<div>Parent Component: <child-component></child-component></div>',
 components: {
 'child-component': child
 }
});
Vue.component("parent-component", parent);

上面的定义过程比较繁琐,也可以不用每次都调用Vue.component和Vue.extend方法: 

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})

// 局部注册也可以这么做
var Parent = Vue.extend({
 components: {
 'my-component': {
  template: '<div>A custom component!</div>'
 }
 }
})

动态组件

多个组件可以使用同一个挂载点,然后动态的在他们之间切换。使用保留的<component>元素,动态地绑定到它的is特性。下面的列子在同一个vue实例下挂了home、posts、archive三个组件,通过特性currentView动态切换组件显示。

html代码: 

<div id="dynamic">
 <button id="home">Home</button>
 <button id="posts">Posts</button>
 <button id="archive">Archive</button>
 <br>
 <component :is="currentView"></component>
</div>

js代码: 

var vue = new Vue({
 el:"#dynamic",
 data: {
 currentView: "home"
 },
 components: {
 home:{
  template: "Home"
 },
 posts: {
  template: "Posts"
 },
 archive: {
  template: "Archive"
 }
 }
});
document.getElementById("home").onclick = function(){
vue.currentView = "home";
};
document.getElementById("posts").onclick = function(){
vue.currentView = "posts";
};
document.getElementById("archive").onclick = function(){
vue.currentView = "archive";
};

组件和v-for 
<my-component v-for="item in items"></my-component> 

不能传递数据给组件,因为组件的作用域是独立的。为了传递数据给组件,应当使用props: 

<my-component
v-for="item in items"
:item="item"
:index="$index">
</my-component>

不自动把 item 注入组件的原因是这会导致组件跟当前 v-for 紧密耦合。显式声明数据来自哪里可以让组件复用在其它地方。

 深入响应式原理

在组件绑定数据时,如何绑定才能够有效,并且可动态修改、添加属性?看看下面的原理介绍。

如何追踪变化:把一个不同对象传给vue实例作为data的选项,vue.js将遍历它的属性,用Object.defineProperty将它转换为getter/setter。这是ES5特性,所有vue.js不支持IE8或更低版本。

模板中每个指令/数据绑定都有一个对应的watcher对象,在计算过程中它把属性记录为依赖。之后当依赖的setter被调用时 ,会触发watcher重新计算。流程如下所示: 

强大Vue.js组件浅析

变化检测问题:vue.js不能检测到对象属性的添加或删除,属性必须在data上才能让vue.js转换它为getter/setter模式,才能有响应。例如: 

var data = { a: 1 };
var vm = new Vue({
data: data
});
// `vm.a` 和 `data.a` 现在是响应的
vm.b = 2
// `vm.b` 不是响应的
data.b = 2
// `data.b` 不是响应的

不过,也有办法在实例创建后添加属性并且让它是相应的。可以使用set(key,value)实例方法: 

vm. set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的 

对于普通对象可以使用全局方法:Vue.set(object, key, value):
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的 

初始化数据:尽管Vue.js提供动态的添加相应属性,还是推荐在data对象上声明所有的相应属性。

不这么做: 

var vm = new Vue({
 template: '<div>{{msg}}</div>'
})
// 然后添加 `msg`
vm.$set('msg', 'Hello!')

应该这么做: 

var vm = new Vue({
 data: {
 // 以一个空值声明 `msg`
 msg: ''
 },
 template: '<div>{{msg}}</div>'
})
// 然后设置 `msg`
vm.msg = 'Hello!'
 

组件完整案例
下面介绍的例子实现了模态窗口功能,代码也比较简单。

html代码:

<!-- 实现script定义一个模板 -->
<script type="x/template" id="modal-template">
 <!--模板是否显示通过v-show="show"来设置, transition设置动画效果-->
 <div class="modal-mask" v-show="show" transition="modal">
 <div class="modal-wrapper">
  <div class="modal-container">
  <div class="modal-header">
   <!--slot 相当于header占位符-->
   <slot name="header">
   default header
   </slot>
  </div>
  <div class="modal-body">
   <!--slot 相当于body占位符-->
   <slot name="body">
   default body
   </slot>
  </div>
  <div class="modal-footer">
   <!--slot 相当于footer占位符-->
   <slot name="footer">
   default footer
   </slot>
   <button class="modal-default-button" @click="show = false">OK</button>
  </div>
  </div>
 </div>
 </div>
</script>
<div id="app">
 <!--点击按钮时设置vue实例特性showModal的值为true-->
 <button id="show-modal" @click="showModal = true">show modal</button>
 <!--modal是自定义的一个插件,插件的特性show绑定vue实例的showModal特性-->
 <modal :show.sync="showModal">
 <!--替换modal插件中slot那么为header的内容-->
 <h3 slot="header">Custom Header</h3>
 </modal>
</div>

 js代码: 

//定义一个插件,名称为modal
Vue.component("modal", {
 //插件的模板绑定id为modal-template的DOM元素内容
 template: "#modal-template",
 props: {
 //特性,类型为布尔
 show:{
  type: Boolean,
  required: true,
  twoWay: true
 }
 }
});
//实例化vue,作用域在id为app元素下,
new Vue({
 el: "#app",
 data: {
 //特性,默认值为false
 showModal: false
 }
});

css代码: 

.modal-mask {
 position: fixed;
 z-index: 9998;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .5);
 display: table;
 transition: opacity .3s ease;
}

.modal-wrapper {
 display: table-cell;
 vertical-align: middle;
}

.modal-container {
 width: 300px;
 margin: 0px auto;
 padding: 20px 30px;
 background-color: #fff;
 border-radius: 2px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
 transition: all .3s ease;
 font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
 margin-top: 0;
 color: #42b983;
}

.modal-body {
 margin: 20px 0;
}

.modal-default-button {
 float: right;
}

/*
* the following styles are auto-applied to elements with
* v-transition="modal" when their visiblity is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/

.modal-enter, .modal-leave {
 opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

由于自己在项目中还没怎么深入使用组件的功能,所以自己对组件的理解也不深入,介绍的比较肤浅,谢谢大家的阅读。

Javascript 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
超详细的JS弹出窗口代码大全
Apr 18 #Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 #Javascript
关于javascript的一些知识以及循环详解
Sep 12 #Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 #Javascript
Javascript6中字符串的四个新用法分享
Sep 11 #Javascript
JavaScript制作简单分页插件
Sep 11 #Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 #Javascript
You might like
神族 Protoss 历史背景
2020/03/14 星际争霸
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
简单实现php上传文件功能
2017/09/21 PHP
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python实现复制整个目录的方法
2015/05/12 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python学生管理系统代码实现
2020/04/05 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python如何查看微信消息撤回
2018/11/27 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python字典与json转换的方法总结
2020/12/28 Python
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
Internal修饰符有什么含义
2013/07/10 面试题
酒店公关部经理岗位职责
2013/11/24 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
法律进社区实施方案
2014/03/21 职场文书
主题团日活动总结
2014/06/25 职场文书
计划生育责任书
2015/05/09 职场文书
上学路上观后感
2015/06/16 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android