第六章 组件 51 组件化和模块化的区别以及组件的定义方式
什么是组件:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能
模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
组件化和模块化的不同:
- 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发.保证每个功能模块的职能单一 ;
- 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
全局组件定义的三种方式
1.使用Vue extend配合Vue.component方法:
var login = Vue.extend({ template: '<h1>登录</h1>" }); Vue.corponent('login', login);
2.直接使用Vue.component方法:
Vue .component('register', { template: '<h1>注册</h1>' });
3.将模板字符串,定义到script标签中:
<script id="tmp1" type-"x-template"> <div><a href="#">登录</a>| <a href="#">注 册</a></div> </script>
同时,需要使用Vue component来定义组件:
Vue.component('account', { template: '#tmp1' });
注意:组件中的DOM结构,有且只能有唯一的根元素 ( Root Element )来进行包裹!