Hide a component in Vue.js

Question

Is there a way with which I can control the rendering of a shared component in another component? I have a component which is a bottom bar which needs to be disabled/ not rendered in a few concrete components.

I am rendering the bottom bar in a template which is being used by all the components.

EDIT: I am using webpack

Answer 1

As Roy said, you could have a property that conditions the rendering of the component, as such (assuming you're using vue-loader):

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

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

then, in your parent component:

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

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