隱藏在Vue.js

Question

組件是否有與我能控制一個共享組件的呈現在另一個組件的方法嗎？我有一個組件，這是一個底欄，需要禁用/不在幾個具體組件中呈現。

我渲染正在使用的所有組件的模板底部欄。

編輯：我使用的WebPack

Answer 1

使用VUE路由器

const Header = {template: '<div>component header</div>'} 
 
const Main = {template: '<div>component main</div>'} 
 
const Footer = {template: '<div>component footer</div>'} 
 

 
const router = new VueRouter({ 
 
    routes: [ 
 
    { 
 
     path: '/link1', 
 
     components: { 
 
     header: Header, 
 
     main: Main, 
 
     footer: Footer 
 
     } 
 
    }, 
 
    { 
 
     path: '/link2', 
 
     components: { 
 
     header: Header, 
 
     main: Main 
 
     } 
 
    } 
 
    ] 
 
}) 
 

 
const app = new Vue({ router }).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.6.0/vue-router.min.js"></script> 
 

 
<div id="app"> 
 
    <router-link to="/link1">/link1</router-link> 
 
    <router-link to="/link2">/link2</router-link> 
 

 
    <router-view class="" name="header"></router-view> 
 
    <router-view class="" name="main"></router-view> 
 
    <router-view class="" name="footer"></router-view> 
 
</div>

Answer 2

正如羅伊說，你可以有一個屬性，條件組件的渲染，這種（假設您使用vue-loader）：

<template> 
    <div v-if="shouldRender"> 
    <!-- ... --> 
    </div> 
</template> 

<script> 
export default { 
    props: ['shouldRender'] 
} 
</script> 

那麼，在你的父組件：

<template> 
    <div> 
    <!-- ... --> 
    <BottomBar :should-render="showBottomBar" /> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     showBottomBar: true 
    } 
    }, 
    methods: { 
    toggleBottomBar() { 
     this.showBottomBar = !this.showBottomBar 
    } 
    } 
} 
</script>