在 Vue.js 中隐藏组件 [英] Hide a component in Vue.js
问题描述
有没有办法控制另一个组件中共享组件的渲染?我有一个组件，它是一个底部栏，需要在一些具体组件中禁用/不呈现.
我正在所有组件都使用的模板中渲染底部栏.
我正在使用 webpack
正如 Roy 所说，你可以有一个属性来调节组件的渲染(假设你正在使用 vue-loader):
<div v-if="shouldRender"><!-- ... --></模板><脚本>导出默认{道具:['shouldRender']}
然后，在您的父组件中:
<div><!-- ... --><BottomBar :should-render="showBottomBar"/></模板><脚本>导出默认{数据 () {返回 {showBottomBar: 真}},方法: {切换底部栏 () {this.showBottomBar = !this.showBottomBar}}}
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
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>
这篇关于在 Vue.js 中隐藏组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
