基于vue父子组件写一个子组件弹窗,父组件给子组件穿参数,并渲染
时间: 2023-05-19 22:07:36 浏览: 104
使用vue实现各类弹出框组件
非常感谢您的问题!以下是基于 Vue 父子组件写一个子组件弹窗的代码示例:
在父组件中,我们可以通过 props 将参数传递给子组件:
```
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<my-modal :show="showModal" :title="modalTitle" @close="showModal = false">
<p>这是弹窗的内容</p>
</my-modal>
</div>
</template>
<script>
import MyModal from './MyModal.vue'
export default {
components: {
MyModal
},
data() {
return {
showModal: false,
modalTitle: '弹窗标题'
}
}
}
</script>
```
在子组件中,我们可以通过 props 接收父组件传递的参数,并在弹窗中渲染:
```
<template>
<div v-if="show" class="modal">
<div class="modal-mask"></div>
<div class="modal-wrapper">
<div class="modal-container">
<h3>{{ title }}</h3>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<button @click="$emit('close')">关闭</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
title: String
}
}
</script>
```
这样,我们就可以在父组件中通过点击按钮打开弹窗,并将标题和内容传递给子组件,子组件会根据传递的参数渲染弹窗。希望这个示例能够帮助您解决问题!
阅读全文