基于vue父子组件写一个子组件弹窗
时间: 2023-05-19 08:07:22 浏览: 87
可以使用Vue.js的slot和props来实现一个基于vue父子组件的子组件弹窗。以下是一个简单的示例代码:
```
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<modal v-if="showModal" @close="showModal = false">
<h3>这是弹窗的标题</h3>
<p>这是弹窗的内容</p>
</modal>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default {
components: {
Modal
},
data() {
return {
showModal: false
}
}
}
</script>
<template>
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
<button @click="$emit('close')">关闭</button>
</div>
<div class="modal-body">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Modal'
}
</script>
```
在这个示例中,我们创建了一个父组件,其中包含一个按钮,点击按钮会显示一个弹窗。弹窗是通过子组件Modal实现的,Modal组件包含一个插槽,用于显示弹窗的内容,以及一个插槽,用于显示弹窗的标题。当用户点击弹窗的关闭按钮时,Modal组件会触发一个名为“close”的事件,父组件会监听这个事件并将showModal属性设置为false,从而关闭弹窗。
如果您需要更复杂的弹窗,可以根据需要修改Modal组件的代码。