引入Vue import Vue from "vue";
1.全局组件注册
Vue.component("my-header",{//注册全局组件
template:'<p>这是一首歌</p>'
});
new Vue({
el:"#app",
data:{
}
})
直接在html页面引入<my-header></my-header>
2.局部组件注册
var myHeader={
template:"<p>这是一个局部组件</p>"
}
new Vue({
el:"#app",
data:{},
components:｛
"my-header":myHeader
｝
} );
页面直接使用my-header标签
3.局部组件添加子组件(子组件写在父组件上面)
var myHeaderChild={
template:''<p>这是一个子组件</p>"
}
var myHeader={
template:"<my-header-child></my-header-child>这是一个子组件",
components:{
"my-header-child":myHeaderChild
}
}
new Vue({
el:"#app",
data:{},
components:{
"my-header":myHeader
｝
})
页面直接使用my-header标签