天津百度建网站,拍卖网站模板下载,浙江建设干部学校网站首页,ae模板免费网站以前一直想#xff0c;每次封装一个弹窗组件的时候#xff0c;一直特别复杂#xff0c;父传子#xff0c;子传父#xff0c;各种来回绕#xff0c;来回修改。
一直想如何才能更加简化#xff0c;但是一直没时间#xff0c;今天终于抽时间出来封装了一下
本次封装简化…以前一直想每次封装一个弹窗组件的时候一直特别复杂父传子子传父各种来回绕来回修改。
一直想如何才能更加简化但是一直没时间今天终于抽时间出来封装了一下
本次封装简化了很多的代码再也不用父传子子传父各种来回绕来回修改了。
实现功能如下
//拆分了表格组件和弹窗组件
//实现在父组件中控制弹窗的显示与隐藏
//在弹窗子组件中修改内容后父组件内容对应更新。2.所用技术
//1.defineExpose 用于导出子组件的方法和数据
//2.defineEmits 用于子组件通知父组件执行操作下面我来说一下如何利用defineExpose和defineEmits来封装属于自己的组件吧
为了方便演示这里就不上什么表格了简单的用父组件和子组件进行演示直接上代码
父组件代码
templatediva-button typeprimary statusdanger clickshowshowModal/a-button!-- 为弹窗组件绑定ref 并且绑定子传父的emit事件 --homeModal refhomeModalRef updateclose/homeModal/div
/templatescript setup langts
import { ref, watch } from vue;
import homeModal from ./component/homeModal.vueconst homeModalRef ref()
const show () {// 这里是调用了弹窗组件中的方法实现弹窗的显示 用到了defineExpose方法homeModalRef.value.handleClick()
}// 这里是接受触发事件后父组件执行函数各种请求
const close () {getInitTable()
}
// 这里是模拟的函数请求方法
const getInitTable () {console.log(66666)
} /script
style scoped langless
div{margin-top: 20px;
}
/style子组件代码
templatediva-modalv-model:visiblevisibletitleModal FormcancelhandleCancelokhandleOka-form :modelforma-form-item fieldname labelNamea-input v-modelform.name //a-form-itema-form-item fieldpost labelPosta-select v-modelform.posta-option valuepost1Post1/a-optiona-option valuepost2Post2/a-optiona-option valuepost3Post3/a-optiona-option valuepost4Post4/a-option/a-select/a-form-item/a-form/a-modal/div
/templatescript setup langts
import { reactive, ref } from vue;
const visible ref(false);const form reactive({name: ,post:
});// 绑定emit事件
const emit defineEmits{(event:update):void
}()const handleClick () {visible.value true;
};const handleOk () {if (form.name ! ) {handleCancel()// 执行emit(update)}
};
const handleCancel () {visible.value false;
}// 导出方法
defineExpose({handleClick
})/script
style scoped langless/style
