- 你封装过组件吗??
- 说一下组件封装????
- 你在项目中是如何封装组件的?????
…
以上问题是面试官,最常问到的问题?那么你应该如何回答呢?
答: 我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))
首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性低等问题。
使用组件的好处
- 组件是可以
复用
性的 - 易于
维护
- 有
封装
性,易于使用 - 大型项目中降低组件之间
重复
性
全局组件
引用全局组件my-header
<body>
<div id="main1">
<!-- 正常模板解析的时候,不会将自定义标签解读出来,而是将自己定义组件里的参数解读出来,也就是下面template中的h1标签 -->
<my-header></my-header>
</div>
<div id="main2">
<!-- 自定义组件具有复用性 -->
<my-header></my-header>
</div>
<div id="main3">
<my-header></my-header>
</div>
</body>
注册全局组件my-header
//全局组件:在任何地方,任何方式,任何地点都可以使用的标签组件
vue.component("my-header", {
// h1标签是我们在自定义主键里面写的参数的标签
template: '<h1>标题{
{msg}}</h1>',
data(){
return {
msg:100}
}
})
new Vue({
el: '#main'
});
new Vue({
el: '#main2'
});
new Vue(