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>'}}});