本文的内容均采自官方文档:
https://www.reawing.com/doc-next/components/modal.html#usage
Modal弹窗的基本使用:
在下面的代码中,子组件名为addOrUpdate,与父组件同级:
首先引入子组件
import addOrUpdate from './addOrUpdate.vue'
script中挂载子组件:
const [registerAOU,{openModal}]=useModal()
使用函数打开弹窗
function update(data){
openModal(true,{
flag:2,
data
})
}
在template中使用子组件:
<addOrUpdate @register="registerAOU" />
在子组件中,需要先引入useModalInner并注册到当前页面:
<script setup>
import { BasicModal, useModalInner } from '/@/components/Modal'
const[resiter,{closeModal,setModalProps}] = useModalInner((data)=>{
console.log('子组件打印从父组件传递过来的值');
console.log(data);
})
</script>
在子组件模板中,绑定该组件:
<BasicModal
v-bind="$attrs"
@register="register"
title="操作窗口"
>
123
</BasicModal>