前端mvvm框架vue.js（2）——组件

vue.js借鉴了angluar.js关于组件的内容，同时增加自己的新特性，而且组件注册非常灵活多变；支持单文件的方式，使组件开发更为清新明了。

使用组件

1，注册

vue.js提供一系列的方法创建和注册组件，这些方法包括:Vue.extend,Vue.component

//组件创建和注册
var myComponent=Vue.extend({
 //选项对象options，这里声明组件包含的东西
})
Vue.component("my-component",mycomponent);
//注意单独使用这种用法，组件是全局注册的

组件注册后，可以以自定义元素my-component的方式写在父组件的模板中，同时要确保在根实例化之前注册了组件

2，局部注册

在不需要全局注册组件时，使用components选项将组件注册到另一组件内部。

var childComponent=Vue.extend({
//选项对象
})
var parentComponent=Vue.extend({
   template:"...",
   components:{"my-component":childComponent}
})

3，注册语法糖

可以直接传递选项对象给Vue.component和components

//注册组件
Vue.component("my-component",{
 template:"<div>注册语法糖下注册组件</div>"
})
//局部注册的语法糖
var parent=Vue.extend({
  components:{
     "my-component":{
          data:{msg:"hello vue.js"},
          template:"<div>局部注册语法糖</div>"
      }
    }
})

组件选项问题

特殊的选项:data和el,直接使用时，所有实例将共享这两个选项，此时可以将这两个选项注册为方法

var myComponent=Vue.extend({
 data:function(){
  return{a:1}
}
})