写一个vue代码关于如何用props让父组件控制子组件的显示隐藏
时间: 2023-11-03 15:06:13 浏览: 38
好的,以下是关于如何用props让父组件控制子组件的显示隐藏的Vue代码示例:
在父组件中:
```
<template>
<div>
<button @click="toggleChild">切换子组件显示</button>
<child-component :showChild="showChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
showChild: false
}
},
methods: {
toggleChild() {
this.showChild = !this.showChild
}
}
}
</script>
```
在子组件中:
```
<template>
<div v-if="showChild">
<!-- 子组件的内容 -->
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
showChild: Boolean
}
}
</script>
```
这段代码中,我们在父组件中通过一个`showChild`的`data`属性来控制子组件是否显示。在父组件的模板中,我们通过绑定子组件的`showChild`属性,将父组件的`showChild`值传递给子组件。在子组件中,我们通过这个`showChild`的`props`属性来接收这个值,并通过`v-if`来控制子组件是否显示。最后,我们在父组件中定义了一个`toggleChild`方法来切换`showChild`的值,从而控制子组件的显示和隐藏。