vue-组件

1.什么是组件

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

2.组件注册

（1）第一种方式

<div id="box">
       <name></name>   //定义的组件名
</div>

var nameClass=Vue.extend({ //相当于创建一个组件类nameClass 
  template:'<h3>我是标题3</h3>'
 });
Vue.component('name',nameClass); //全局定义组件 
var vm=new Vue({ //创建vue实例
   el:'#box', data:{
   } 
});

注意：如果组件里放数据，data必须是函数形式，且函数必须返回的是对象（json）

var nameClass=Vue.extend({ 
        template:'<h3>{{msg}}</h3>,
        data(){ //data是一个函数 
             return {
                msg:'welcome'        //return 的是一个json对象 
              }
        }
});
var vm=new Vue({ //创建vue实例
         el:'#box',
          data:{
        }
 });

//局部定义
var nameClass=Vue.extend({
      template:'<h3>{{msg}}</h3>',
      data(){
          return {
	     msg:'ddddd'
	  }
      }
});
var vm=new Vue({
	el:'#box',
	data:{
	    bSign:true
	},
       components:{    //局部组件，一个组件库
	    'name':nameClass
	}
});

（2）第二种方式:这种方式比第一种方式更简洁

<div id="box">
	<my-aaa></my-aaa>
</div>

//全局注册
Vue.component('my-aaa',{  //注册一个全局组件my-aaa
    template:'<strong>hello</strong>'
});
var vm=new Vue({  //创建一个Vue实例
	el:'#box'
})  

//局部
var vm=new Vue({
	el:'#box',     //元素
	components:{   //组件
	     'my-aaa':{   //局部组件my-aaa
		   data(){  //数据
			return {    //返回json对象
				msg:'welcome vue'
			}
		   },
		   methods:{  //方法
			change(){   //change方法
				   this.msg='changed';
				}
			},
		   template:'<h2 @click="change">标题2->{{msg}}</h2>'
		}
	}
});