本文共 1484 字，大约阅读时间需要 4 分钟。

定义Vue组件

• 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
• 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

• 全局组件定义的三种方式

1. 使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({      template: '
登录
'    });    Vue.component('login', login);

2. 直接使用 Vue.component 方法：

Vue.component('register', {      template: '
注册
'    });

3. 将模板字符串，定义到script标签种：

         
    
     登录 | 
     注册
    
    
   

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {      template: '#tmpl'    });```注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！**定义一个私有的组件**使用vue实例的属性components在内部定义一个私有组件components:{  //定义一个实例内部的私有组件					login:{						template:'
这是一个私有的组件
'					}				}或者使用
   		components:{  //定义一个实例内部的私有组件					login:{						template:'#teml1'					}				}**组件之间的切换***方式一：*使用
   
    和
    
       使用一个标识符来进行识别例：
     登录			
     注册			
     			
     *方式二*
     登录			
     注册			
     			
     			Vue.component('login',{			template:'
     
登录组件
'		})		Vue.component('register',{			template:'
     
注册组件
'		})**注意**在组件中可以有自己data数据，组件的data和实例的data不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法，这个方法必须返回一个对象。原因：组件之间不能公用一个对象，每次调用组件调用data时在内部开辟一个新的对象来避免组件之间的对象公用*使用案例*Vue.component('mycoml',{				template:'
     
这是一个全局组件{
  {msg}}
',				data:function(){					return {						msg:'这是组件中的定义的数据'					};				}			})**组件和动画之间的切换**
     			
     				
      			
     	使用transition 标签将component 包裹起来就可以实现动画效果，使用mode属性设置为“out-in”可以变美，再上一个元素出之后后一个元素进入
    
   

转载地址：http://yoxui.baihongyu.com/