在 Vue.js 中隐藏组件答案

【问题标题】：Hide a component in Vue.js在 Vue.js 中隐藏组件
【发布时间】：2017-06-22 13:04:37
【问题描述】：

有没有一种方法可以控制共享组件在另一个组件中的呈现？我有一个组件，它是一个底部栏，需要在一些具体组件中禁用/不呈现。

我正在渲染所有组件都在使用的模板中的底部栏。

编辑：我正在使用 webpack

【问题讨论】：

听起来共享组件应该带一个 prop 指示它是否应该渲染。

标签： vue.js vuejs2 vue-component

【解决方案1】：

正如 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>

【讨论】：

如果按钮在另一个组件中，而不是父组件中怎么办？
按钮应该有一个用于点击的事件发射器，你需要将toggleBottomBar绑定到那个发射器<MyCustomButton @click="toggleBottomBar">

【解决方案2】：

使用 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>

【讨论】：