vue實現部分頁面導入底部 vue配置公用頭部、底部,可控制顯示隱藏
在app.vue文件裏引入公共的header 和 footer
header 和 footer 默認顯示,例如某個頁面不需要顯示header
可以使用 this.$emit('header',false); 來控制header不顯示
例如:test頁面不需要顯示header,在頁面被創建的時候廣播(this.$emit)告訴上級不顯示header,
並且在當前頁面寫自己的header代碼,就可以了
app.vue
<template>
<div id=
"app"
>
<app-header v-
if
=
"header_show"
></app-header>
<router-view v-on:header=
"header"
v-on:footer=
"footer"
></router-view>
<app-footer v-
if
=
"footer_show"
></app-footer>
</div>
</template>
<script>
import
Header from
'./components/header'
import
Footer from
'./components/footer'
export
default
{
name:
'App'
,
data(){
return
{
header_show:
true
,
footer_show:
true
,
}
},
components: {
'app-header'
:Header,
'app-footer'
:Footer,
},
methods:{
//是否顯示頭部
header:
function
(bool) {
this
.header_show = bool;
},
//是否顯示底部
footer:
function
(bool) {
this
.footer_show = bool;
}
}
}
</script>
test.vue
<template>
<div>
test
</div>
</template>
<script>
export
default
{
name:
'test'
,
components:{
},
data () {
return
{
}
},
created:
function
() {
this
.$emit(
'header'
,
false
);
}
}
</script>
header.vue
<template>
<div
class
=
"header"
>
head
</div>
</template>
<script>
export
default
{
name:
'app-header'
,
data () {
return
{
}
},
methods:{
},
created(){
}
}
</script>
footer.vue
<template>
<div
class
=
"wrap"
id=
"app-footer"
>
footer
</div>
</template>
<script>
export
default
{
name:
'app-footer'
,
data () {
return
{
}
}
}
</script>
原文地址(如有侵權,聯繫刪除):
https://www.cnblogs.com/zdz8207/p/vue-header-footer-emit.html