组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/462f5d50493a9233a31d83c2b826f08b.png)
1.全局组件
注册:
Vue.component(tagName, options)//tagName 为组件名,options 为配置选项
调用:
<tagName></tagName>
实例
<div id="app">
<!-- 调用组件 -->
<test></test>
</div>
</template>
<script>
//注册组件
Vue.component('test',{
template:'<h1>自定义组件!</h1>'
})
//创建根实例
new Vue({
el: '#app'
})
</script>
2.局部组件
局部组件只能在父模板中调用
实例
<div id="app">
<!-- 3.调用组件 -->
<test></test>
</div>
<script>
//1.定义组件
var Child = {
template: '<h1></h1>'
}
//创建根实例
new Vue({
el: '#app',
//2.注册组件
components: {
//<test>将只在父模板可用
'test': Child
}
})
</script>