现在的有些web应用都非常庞大,web开发也越来越组件化、模块化,我们需要在使用vue的时候去写一些组件,避免重复造轮子,提高组件的复用和开发效率。
1.什么是组件?
一个组件就好像一块积木,多个组件的层层堆叠、摆放最终形成一个完整的系统。组件的好处在于降低了各个模块之间的耦合性,以至于我们在维护项目时不会太心累。高度耦合的项目必然会带来维护时间上的浪费。在目前的前端开发中,组件化发开是必须要掌握的技能,我们也需要学会如何去封装一个组件。
2.Vue组件的使用
vue中组件分为全局注册和局部注册,全局注册的组件可以在每个vue实例中使用。
全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
//在模板里使用
<div id="app">
<my-component-name></my-component-name>
<my-component-name></my-component-name>
<my-component-name></my-component-name>
</div>
局部注册
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
//在需要的vue实例中使用组件
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
注:组件命名还可以使用峰驼命名(如:MyCompontent),个人喜欢短横线命名(如:my-component),这跟我们在模板中使用的方式是一致的。