父組件調用子組件
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定義局部樣式
父組件調用子組件