1.全局组件
vue注册一个全局组件语法格式如下:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:<tagName></tagName>
全局注册的组件只能在挂载的元素下使用,挂载的元素之外使用渲染不出来的,如果想在组件中使用实例中的数据,需要用到props传递(后面的笔记会讲到),直接使用是没有效果的。
2.局部组件
局部组件是在实例选项中注册的,这样组件只能在这个实例中使用:
var app = new Vue({
el:"#app",
data:{
name:'Helle Vue!',
},
components: {
'v-header':{
template: '<p>Hello</p>'
}
}
})
也可以将模板数据放在对象中存储
3.在组件写组件
<body>
<div id="app">
<v-header></v-header>
</div>
</body>
<script>
var vheaderchild = {
template:'<p>World</p>',
}
var vheader = {
template:'<p>Hello<v-header-child></v-header-child></p>',
components:{
'v-header-child': vheaderchild
}
}
var app = new Vue({
el:"#app",
data:{
name:'Helle Vue!',
},
components: {
'v-header':vheader
}
})
</script>