组件
组件化
- 组件化是当今最为流行的一种可复用性增加的方法,随着当今前端开发的复杂度更加,这个组件化变得越来越流行
组件的基础
-
组件是一个具备html css img js …等的一个聚合体
-
组件的表现形式就类似一个标签
-
组件至少得有模板,模板用template表示,相当于el,但是不能用el,因为被根实例占用了
-
Vue.js通过Vue.extend() 方法来扩展 组件的 使用
-
Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
-
new Vue出来的 ViewModel( 视图模型 ) 也是一个组件,我们称之为 ‘根实例组件’ ,叫 ‘Root’ 组件
-
Vue中组件的表现形式是类似于标签的,要想像标签一样使用,就必须得符合 h5 的规则,也就是必须要进行组件的注册
-
组件的注册有两种形式
- 全局注册
- 格式: Vue.component(组件的名称,组件的配置项)
- 组件的命名规则
- 举例:
- Father Hello
- my-button
- 局部注册
- 格式:
- 写在组件内注册
- 举例:
- new Vue({ componens: { 组件名: 组件配置项 } })
- 全局注册
-
组件必须先注册在使用
-
组件中的模板需要使用一个叫做template的配置项表示
-
组件的配置项可以简写,不需要使用 Vue.extend(options),可以直接将options写在组件的注册中
<div id="app"> <Haha></Haha><!--组件的表现形式就是一个标签 --> </div>
//简写形式 全局注册 Vue.component(组件的名称,组件的配置项) 一般用简写 Vue.component('Haha',{ template:'<h3>xixixiixixixi</h3>' }) //3.组件的使用 new Vue({//是一个根实例组件,叫Root组件 el:'#app', })
-
template组件中有且仅有一个根元素
<div id="app"> <Hello></Hello> </div> <template id="hello"> <div> <div> <h3> hello Vue.js </h3> </div> <div> <h3> hello Vue.js </h3> </div> </div> </template>
new Vue({ el: '#app', components: { 'Hello': { template: '#hello' } } })
-
组件使用时有规则的:
- 比如特殊的一些标签: ul li ol li table tr td dl dt dd select option …这类型标签,是规定了它们的直接子元素,当我们将组件写入这类型标签的时候,就会发现有问题
- 解决: 在直接子元素身上,通过 is 属性来 绑定 一个组件
- 举例:
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <!-- <Hello></Hello> 这么写有问题--> <tr is = "Hello"></tr> </table>
-
组件嵌套
- 全局注册:
- 要将子组件的组件名写在父组件的template中
<div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> father </h3> <hr> <Son></Son> </div> </template> <template id="son"> <h3> son </h3> </template>
Vue.component('Father',{ template: '#father' }) Vue.component('Son',{ template: '#son' }) new Vue({ el: '#app', })
- 局部注册
<div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> father </h3> <hr> <Son></Son> </div> </template> <template id="son"> <h3> son </h3> </template>
new Vue({ el: '#app', components: { 'Father': { template: '#father', components: { 'Son': { template: '#son' } } } } })
- 全局注册: