对Vue组件化的一些理解
一、基础概念
1、概念:组件是html、css、js等的一个聚合体
2、为什么要使用组件?
1、组件化
-
将一个具备完整功能的项目的一部分进行多处使用
-
加快项目的进度
-
可以进行项目的复用
2、要想实现组件化,我们使用的这一部分必须是完整的,这个完整的整体称之为组件
3、vue将html、css、js、img等聚合体放在一起组成的文件称之为单文件组件,后缀名为vue(xxx.vue)
二、组件的创建
- 引入vue.js文件之后,会向全局暴露一个Vue构造器函数
Vue.extend()
是 vue 用来扩展 vue 功能(组件)的Vue.extend()
实例化与new Vue()
是一样的,几乎没有区别,所以借鉴react,vue决定组件要以标签的形式呈现- 为了符合html/html5的规则,所有组件的标签化使用必须先注册(即创建)
- 说明白点注册就是将标签化的组件解析为html能识别的标签,因为自己创建的标签需要符合html规则,让html正确解析该组件标签
- 组件必须先注册再使用,使用是在实例范围内使用
- 组件名称可以小写加-命名 如:header-title
- 大驼峰 如:GabrielLi 使用的时候写gabriel-li (注册的时候写的是大写,使用的时候写小写加-,因为浏览器会自动将大写解析成小写)
- 一个单词大写,注意不要和原生的h5标签重名,比如 header footer
1、全局注册
<div id="app">
<Father></Father> <!-- 组件注册一次就可以在不同的实例中使用 -->
</div>
<div id="root">
<Father></Father> <!-- 组件注册一次就可以在不同的实例中使用 -->
</div>
//组件的创建:Vue.component( 组件的名称,组件的配置项 )
var Hello = Vue.extend({
template:'<div>这是father组件</div>'
})
Vue.component('Father',Hello) // 组件Father不能在实例范围外使用
new Vue({
el:'#app'
})
new Vue({
el:'#root'
})
2、局部注册
局部注册在组件中用一个components的配置项来表示,只能在注册的范围内使用,其他地方不能使用
<div id="app">
<zhang-san></zhang-san>
</div>
var Hello = Vue.extend({
template:'<div> 这里是组件 </div>'
})
new Vue({
el:'#app',
components:{
'zhang-san':Hello //key:value key是组件名称 value是组件配置项
}
})
3、简写
<div id="app">
<gabriel-li></gabriel-li> <!-- 输出结果为 “局部注册” -->
<Father></Father> <!-- 输出结果为 “全局注册” -->
</div>
Vue.component('Father',{
template:'<div> 全局注册 </div>'
})
new Vue({
el:'#app',
components:{
'GabrielLi':{
template:'<div> 局部注册 </div>'
}
}
})
三、组件的嵌套
- 父组件里面放子组件,类似dom结构的父子级结构
- 将子组件以标签的形式放在父组件的模板中使用,千万不要放在父组件的内容中
<div id="app">
<Father></Father>
</div>
Vue.component('Father',{
template:'<div> Father <Son></Son> </div>'
})
Vue.component('Son',{
template:'<div> son </div>'
})
new Vue({
el:'#app'
})
局部的写法
new Vue({
el: '#app',
components: {
'Father': {
template: '<div> father组件 <Son></Son></div>',
components: {
'Son': {
template: '<div> son组件 </div>' // son组件嵌套在father组件中
}
}
}
}
})
四、组件的特殊使用规则
1、使用规则之is规则
- 如果直属父子级直接组件以标签化形式使用,会有bug
<div id="app">
<table>
<!-- <tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<Hello></Hello> 上述这种方法会有bug -->
<tr is = "Hello"></tr> <!-- 通过is来绑定组件 -->
</table>
</div>
Vue.component('Hello',{
template: '<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
})
new Vue({
el: '#app'
})
2、使用规则之template
1、实例范围内使用
- template中的内容被当做一个整体了,并且
<template></template>
标签是不会解析到html结构中的
<div id="app">
<template> <!-- template不会被解析在html结构中,中间的代码会被解析 -->
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
</div>
Vue.component('Hello',{
template: ''
})
new Vue({
el: '#app'
})
2、实例范围外使用
- 实例范围外template标签中的代码是不会被直接解析的
<div id="app">
<template> <!-- 该段代码会原样呈现在html结构中,不会被解析 -->
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</template>
</div>
Vue.component('Hello',{
template: ''
})
new Vue({
el: '#app'
})
需要正确使用template,可以采用实例范围外方法,但是需要修改部分代码
<div id="#app">
<Hello></Hello> <!-- 使用Hello组件 -->
<template id="hello"> <!--但是使用第二种template使用后,有个弊端,`<template></template>`标签结构会在html文件中显示,解决: 使用webpack、gulp等工具编译,将来要用vue提供的单文件组件-->
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</template>
</div>
Vue.component('Hello',{
template: '#Hello'
})
new Vue({
el: '#app'
})