Vue组件注册分为全局注册和局部注册,全局注册。
Vue.component('my-li',{ template: '<div>父组件</div>' });
这里推荐使用驼峰形式的写法,上面是一个简单的全局组件,在使用new Vue挂载后就可以在全局范围内使用。
这里主要说如何嵌套使用,下面是一个例子
Vue.component('my-li',{ template: '<div>父组件</div>' });
Vue.component('my-lis',{ template: '<div>子组件<my-li></my-li></div>' }); var vm = new Vue(
{ el: '#box', template: '<my-lis></my-lis>' }
);
![](https://i-blog.csdnimg.cn/blog_migrate/f7a61640cf1eeb61497f6e18d2290b21.png)
效果图如上。
全局注册组件的很简单,不过工作中更多的用到的是局部组件,下面是一个个局部组件注册例子。
var a = { template: '<div>hi</div>' }; var vm = new Vue({ el: '#box', template: '<my-lis></my-lis>', components: { 'my-lis': a, }, });
如果要在一个局部组件内部使用另外一个局部组件,需要在子组件内部定义components对象。
var a = { template: '<div>父组件</div>' }; var b = { template: '<div>子组件<lik></lik></div>', components: { 'lik': a, } }; var vm = new Vue({ el: '#box', template: '<my-lis></my-lis>', components: { 'my-lis': b, }, });
效果
![](https://i-blog.csdnimg.cn/blog_migrate/d8621621dae60421b54d9b7bf8f6363a.png)
最后提一点,组件的注册必须在new Vue之前