Vue.js에서 구성 요소 숨기기

Vue.js에서 구성 요소 숨기기

다른 컴포넌트의 공유 컴포넌트의 렌더링을 제어할 수 있는 방법이 있습니까?바텀 바의 컴포넌트는 비활성화/몇 가지 콘크리트 컴포넌트에서는 렌더링할 필요가 없습니다.

모든 컴포넌트에서 사용하고 있는 템플릿으로 하단 바를 렌더링하고 있습니다.

편집: 웹 팩을 사용하고 있습니다.

Roy가 말한 것처럼 컴포넌트의 렌더링을 조정하는 속성을 가질 수 있습니다(사용하고 있는 경우).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>

vue-router 사용

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>

언급URL : https://stackoverflow.com/questions/44700257/hide-a-component-in-vue-js