vue中组件的定义：

第一种:全局组件

var A=Vue.extend({            template:'
标题一
' });Vue.component("aaa",A);

等价于：

//另一种编写方式Vue.component("bbb",{            template:'
标题二
'})

需要注意的一点是：组件中放数据的时候，data必须是个函数，而且必须返回一个对象。

var A=Vue.extend({data:function(){ //数据   return:{     msg:'标题一'   }},methods：{ 方法   change:function(){     alert(1);     this.msg='改变后的标题一';   }}, template:'
{
   {msg}}
' });Vue.component("aaa",A);

第二种：局部组件

var A=Vue.extend({    template:'
标题一
' });var vm=new Vue({    el:'#box',    data:{    },    components:{ //局部组件      'aaa'：A    }})

局部组件的另一种编写方式

var vm=new Vue({    el:'#box',    data:{    },    components:{ //局部组件      'aaa':{          data:function(){            return:{              msg:'标题一'            }          },          template:'
{
   {msg}}
'      }    }})

到目前为止，vue的组件应该是算告一小段了，不过又引发了新的问题，在上述中template都是单一的标签，如果里边有很多标签，并且嵌套，这样的话tepmlate中还需要转义，就是相当麻烦的事情，所以有了下面的组件-模板

有的时候，在不同组件之间进行动态切换是非常有用的，这时候就需要用到动态组件：

完整代码: