vue.js组件篇

代码复用一直是软件开发中长期存在的一个问题，每个开发者都想再次使用之前写好的代码，又担心引入这段代码后会对现有程序产生影响。从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

}

})