在vue中，组件是最重要的组合部分，官方中定义组件为可复用的vue实例，分为全局组件和局部组件，接下来通过实例来分别演示两种不同的组件。
全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <aaa></aaa> </div> <script> var Aaa=Vue.extend({ template:'<h3>我是全局组件</h3>' }); Vue.component('aaa',Aaa); var vm=new Vue({ el:'#box', }); </script> </body> </html>
通过上面的例子，我们可以总结出全局组件的使用步骤：
- 调用vue.extend()创建一个组件构造器，该构造器中有一个选项对象的template属性可以用来定义组件要渲染的HTML
- 使用vue.component()注册组件，需要提供2个参数：组件的标签和组件构造器。vue.component()内部会调用组件构造器，创建一个组件实例
- 将组建挂载到某个vue实例下。
因为组件是可复用的vue实例，所以它们也能接收data、computed、watch、methods以及生命周期钩子等选项。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="bower_components/vue/dist/vue.js"></script> </head> <body> <div id="box"> <aaa></aaa> </div> <script> var Aaa=Vue.extend({ data:{ msg:'我是全局组件' }, template:'<h3>{{msg}}</h3>' }); Vue.component('aaa',Aaa); var vm=new Vue({ el:'#box', data:{ bSign:true } }); </script> </body> </html>
当我们像往常一样使用data选项时，发现结果并不是预期中那样的，这是因为一个组件的data选项必须是一个函数，该函数返回一个对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="bower_components/vue/dist/vue.js"></script> </head> <body> <div id="box"> <aaa></aaa> </div> <script> var Aaa=Vue.extend({ data(){ return { msg:'我是全局组件' }; }, methods:{ change(){ this.msg='changed' } }, template:'<h3 @click="change">{{msg}}</h3>' }); Vue.component('aaa',Aaa); var vm=new Vue({ el:'#box', data:{ bSign:true } }); </script> </body> </html>
局部组件
调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。
如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。
因此我们可以将上面的全局组件改为局部组件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="bower_components/vue/dist/vue.js"></script> </head> <body> <div id="box"> <aaa></aaa> </div> <script> var Aaa=Vue.extend({ template:'<h3>{{msg}}</h3>', data(){ return { msg:'我是局部组件' } } }); var vm=new Vue({ el:'#box', data:{ bSign:true }, components:{ //局部组件 aaa:Aaa } }); </script> </body> </html>
虽然上面的组件是在某个具体的vue实例下注册的，但是组件构造器还是全局的，个人认为这个并不是完全意义上的局部组件，下面这种组件才是真正意义上的局部组件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style> </head> <body> <div id="box"> <my-aaa></my-aaa> </div> <script> var vm=new Vue({ el:'#box', components:{ 'my-aaa':{ data(){ return { msg:'welcome vue' } }, methods:{ change(){ this.msg='changed'; } }, template:'<h2 @click="change">局部组件-->{{msg}}</h2>' } } }); </script> </body> </html>
组件模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="bower_components/vue/dist/vue.js"></script> </head> <body> <div id="box"> <my-aaa></my-aaa> </div> <template id="aaa"> <h1>标题1</h1> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </template> <script> var vm=new Vue({ el:'#box', components:{ 'my-aaa':{ data(){ return { msg:'welcome vue', arr:['apple','banana','orange'] } }, methods:{ change(){ this.msg='changed'; } }, template:'#aaa' } } }); </script> </body> </html>
