一、 Vue如何实现组件
- 通过实例化Vue构造器函数得到一个Vue实例,这个实例我们称之为 " 根实例 ",它是最大的父级
- 这个根实例是以标签的形式存在的,那么我们也称之为 " 根组件 "
- 根实例也是一个组件,但是我们得到只是跟组件
- Vue.extend( ) 它就是对Vue功能的扩展,这个扩展就是组件
- Vue是通过 Vue.extend( ) 来实现【 扩展 】 Vue的功能的,这个功能就是组件
- 思考: Vue.extend如何使用?
- 通过new Vue.extend () 发现和 new Vue 一样了 排除
- 组件就是一个以标签化呈现的东西,所以我应该像标签一样使用
- 但是无论是 html3 还是 html5 肯定不会同意它随意来个标签的
- Vue会将组件编译成html结构
- Vue的这个处理过程,我们称之为 " 组件注册 "
总结:- Vue是通过Vue.extend() 来实现组件的
- Vue的组件的使用时需要注册的
二、Vue – 组件的注册
全局注册的格式:Vue.component ( ’ 组件的名称 ’ , 组件的配置 )
<body>
<div id="app">
<Hello></Hello>
<hello></hello>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
const Hello = Vue.extend({
template: ' <div> Hello 组件 </div> '
})
Vue.component('Hello', Hello)
new Vue({
el: '#app'
})
</script>
效果显示如下:
三、简写:
const Hello = Vue.extend({
template: ' <div> Hello 组件 </div> '
})
Vue.component('Hello', Hello)
以上代码 简写如下:
Vue.component('Hello', {
template: '<div> Hello 组件 </div>'
})
四、局部:
局部注册使用 components 选项来完成
局部注册只在当前注册的实例范围内有效
components:{ 组件的名称: 组件的选项 }
new Vue({
el: '#app',
components: {
'Hello': {
template: '<div> Hello 局部注册组件 </div>'
}
}
})
效果显示如下: