vue组件封装prop传布尔值,默认false
时间: 2023-07-12 10:39:39 浏览: 66
好的,针对您的问题,我可以给您提供一个简单的Vue组件的代码示例,该组件封装了一个名为`isShow`的布尔类型的prop属性,其默认值为`false`。您可以将这个示例代码集成到您的项目中,也可以根据自己的需求进行修改:
```vue
<template>
<div v-if="isShow">
<!-- 组件内容 -->
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
isShow: {
type: Boolean,
default: false
}
}
}
</script>
```
在这个组件中,我们使用了Vue的`props`属性来声明一个名为`isShow`的prop属性,类型为布尔类型,同时设置了默认值为`false`。在模板中,我们使用了Vue的`v-if`指令来根据`isShow`的值来判断是否显示组件内容。如果`isShow`为`true`,则显示组件内容,否则不显示。
使用这个组件时,您可以在父组件中传递一个名为`isShow`的prop属性来控制组件的显示和隐藏。例如:
```vue
<template>
<div>
<my-component :is-show="true"></my-component>
</div>
</template>
<script>
import MyComponent from '@/components/MyComponent'
export default {
name: 'App',
components: {
MyComponent
}
}
</script>
```
在这个示例中,我们在父组件中使用了`my-component`组件,并传递了一个`isShow`属性,将其值设置为`true`。这样,`my-component`组件就会显示出来。如果我们将`isShow`的值设置为`false`,则组件将被隐藏。