- Vue.js通过Vue.extend() 方法来扩展组件的使用
<div id="app">
<Hello></Hello>
</div>
//1. 组件的配置项
const Hello = Vue.extend({
template: '<div> Hello component!!! </div>'
})
// 2. 组件的注册
Vue.component( 'Hello', Hello )
// 3. 组件的使用
new Vue({
el: '#app'
})
- Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
- new Vue出来的 ViewModel( 视图模型 ) 也是一个组件,我们称之为 ‘根实例组件’ ,叫 ‘Root’ 组件
- Vue中组件的表现形式是类似于标签的,要想像标签一样使用,就必须得符合 h5 的规则,也就是必须要进行组件的注册
- 组件的注册有两种形式
<div id="app">
<Hello></Hello>
</div>
- 全局注册
- 格式: Vue.component(组件的名称,组件的配置项)
Vue.component( 'Hello', {
template: '<h3> hello 组件的简写 </h3>'
})
- 组件的命名规则
- 举例:
1. Father Hello
2. my-button
- 局部注册
- 格式:
写在组件内注册- 举例:
-
new Vue({ el: '#app', components: { 'Hello': { template: ` <h3> hello 局部注册 <p> 1902 </p> </h3> ` } } })
- 格式:
- 组件必须先注册在使用
- 组件中的模板需要使用一个叫做template的配置项表示
- 组件的配置项可以简写,不需要使用 Vue.extend(options),可以直接将options写在组件的注册中
// 1. 组件的注册
Vue.component( 'Hello', {
template: '<h3> hello 组件的简写 </h3>'
})
// 2. 组件的使用
new Vue({
el: '#app'
})
- template组件中有且仅有一个根元素
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<div>
<h3> hello 预祝端午节happy </h3>
</div>
<div>
<h3> hello 预祝端午节happy </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>
-
组件嵌套
结构:
<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>
全局注册:要将子组件的组件名写在父组件的template中
Vue.component('Father',{
template: '#father'
})
Vue.component('Son',{
template: '#son'
})
new Vue({
el: '#app',
})
局部注册
new Vue({
el: '#app',
components: {
'Father': {
template: '#father',
components: {
'Son': {
template: '#son'
}
}
}
}
})