代码复用一直是软件开发中长期存在的一个问题,每个开发者都想再次使用之前写好的代码,又担心引入这段代码后会对现有程序产生影响。从jQuery开始我们就通过插件的形式复用代码,到Requirejs开始将js文件模块化,按需加载,这两种方法都提供了比较方便的复用,但往往还需要自己手动加入所需的css文件和html模块,现在web Components的出现提供了一种新的思路,可以自定义tag标签并拥有自身的模板,样式和交互。Angularjs的指令,Reactjs的组建化都在这方面做尝试。同样vue.js
也提供自身的组件系统,支持自定义tag和原生HTML元素的扩展。
vue.js创建组建构造器的方式非常简单,
var MyComponent=vue.extend({……});
但是现在这个组件还是无法直接使用,需要将组件注册到应用中。vue.js提供了两种注册方式分别是全局注册和局部注册。
全局注册:
全局注册需要确保在根实例初始化之前注册,这样才能使组件在任意实例中被使用,注册方式如下:
vue.component('my-component',MyComponent);
这条语句需要写在var vm=new Vue({……})之前,注册成功之后,就可以在模块中以自定义元素<my-component>的形式使用组件。对于组件的命名,W3C规范是字母小写且包含一个短横杠“-”,Vue.js暂不强制要求。
局部注册:
局部注册则限定了组件只能在被注册的组件中使用,无法在其他组件中使用,注册方式如下:
var MyComponent=vue.extend({
template:'<p>This is a child component</p>'
});
var Parent=Vue.extend({
template:'<div>\
<p>This is a parent component</p>\
<my-child></my-child>\
</div>'
components:{
'my-child':Child
}
})