父组件调用子组件

1.子组件header.vue

  

<template>
<div>头部</div>
</template>

<script>
export default{
data(){
return{

}
}
}
</script>

<style scoped>
div{
background: blue;
}
</style>

 

 

2.子组件body.vue

<template>
<div>
中间
</div>
</template>

<script>
export default{
data(){
return{

}
}
}
</script>

<style scoped>
div{
background: red;
}
</style>

 

 

3.子组件footer.vue

<template>
<div>底部</div>
</template>

<script>
export default{
data(){
return{

}
}
}
</script>

<style scoped>
div{
background: yellow;
}
</style>

 

 

 

4.负组件App.vue

 

  

<template>
<div>
<header-vue></header-vue>
<body-vue></body-vue>
<footer-vue></footer-vue>
</div>
</template>

<script>
import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';
export default{
data(){
return{

}
},
methods:{

},
components:{
headerVue:headerVue,
bodyVue:bodyVue,
footerVue:footerVue
}
}

</script>

<style>

</style>

 注意:scoped定义局部样式