vue组件化开发

一般我们在面试的时候面试官通常会问以下问题
你封装过组件吗？
说一下组件封装？
你在项目中是如何封装组件的？
…
而我的回答：
我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。

一、使用组件的好处
组件是可以复用性的
易于维护
有封装性，易于使用
大型项目中降低组件之间重复性
二、全局组件
引用全局组件my-header

注册全局组件my-header
//全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件
vue.component(“my-header”, {
// h1标签是我们在自定义主键里面写的参数的标签
template: ‘

标题{ {msg}}

’,
data(){
return {msg:100}
}
})
new Vue({
el: ‘#main’
});
new Vue({
el: ‘#main2’
});
new Vue({
el: ‘#main3’
});

三、局部组件
局部组件：只是在我们规定的范围之内才会生效。

new Vue({ el: '#main', components: { "my-header": { template: '

标题{ {vue}}

' } } }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 注意：

当使用 kebab-case(中划线命名) 定义一个组件时