18年手机网站,网站导航栏一般有什么内容,温州做网站建设,大型网站建设公司 北京技术#xff1a;vue3.2.40 UI框架#xff1a;arco-design 2.44.7 css技术#xff1a;less 4.1.3
实现#xff1a;子组件接收props以及通过emit方法传值父组件
vue3使用的组合式API#xff0c;我这里使用的是defineComponent
1.父页面调用子组件
templated…技术vue3.2.40 UI框架arco-design 2.44.7 css技术less 4.1.3
实现子组件接收props以及通过emit方法传值父组件
vue3使用的组合式API我这里使用的是defineComponent
1.父页面调用子组件
templatediv classdataManagerMentPagea-table :columnsfieldColumns :datatableData :scrollbartruetemplate #category{ record }{{ handModelType(record.category) }}/templatetemplate #optional{ column, record, rowIndex }a-button clickhandDetails(column, record, rowIndex) typetext详情/a-button/template/a-tablemodelDetails:modalFormmodalFormhandleCancelhandleCancelhandleModalOkhandleModalOk/modelDetails/div
/templatescript langtsimport {defineComponent,reactive,toRefs,onUnmounted,onMounted,} from vue;import modelDetails from ./components/modelDetails.vue;export default defineComponent({name: DataManagerMent,components: {modelDetails,},setup() {interface IDataManagerMant {// table字段名fieldColumns: any[];// table数据源tableData: any[];modalForm: {visible: boolean;title: string;data: object;};}const dataManagerMant () ({modalForm: {visible: false,title: ,data: null,},// table字段名fieldColumns: [{title: 设备ID,dataIndex: id,ellipsis: true,tooltip: true,},{title: 设备名称,dataIndex: deviceName,ellipsis: true,tooltip: true,},{title: 设备序列号,dataIndex: deviceOuterId,ellipsis: true,tooltip: true,},{title: 设备类型,dataIndex: category,slotName: category,},{title: 厂商,dataIndex: manufacturer,ellipsis: true,tooltip: true,},{title: 绑定模型,dataIndex: relatedModelId,},{title: 创建时间,dataIndex: createDate,},{title: 操作,dataIndex: optional,slotName: optional,align: center,},],// table数据源tableData: [],});const state: IDataManagerMant reactive(dataManagerMant());// 查看详情页function handDetails(column: any, record: any, rowIndex: any) {state.modalForm {visible: true,title: record.id,data: record,};}// 判断设备类型function handModelType(category: string) {let name ;switch (category) {case VEHICLE:name 车辆;break;case VIDEO:name 视频;break;case COMMON:name 默认;break;default:name 默认;break;}return name;}// 关闭弹窗function handleCancel() {state.modalForm {visible: false,title: ,data: {},};}// 弹窗保存按钮事件function handleModalOk() {handleCancel();}return {...toRefs(state),handDetails,handleCancel,handleModalOk,handModelType,};},});
/scriptstyle langless scoped.dataManagerMentPage {width: 100%;height: 100%;margin: 0;padding: 0;}
/style
2.子组件
templatea-modalwidth50%:visiblemodalForm.visibleokhandleOkcancelhandleCancel:title数据详情- modalForm.titleokText保存cancelText取消title-alignstart:okLoadingloadinga-spin :loadingloading tip正在获取数据中...div classmodelDetailsPage/div/a-spin/a-modal
/templatescript langtsimport {defineComponent,reactive,toRefs,onUnmounted,onMounted,watch,} from vue;import { Message } from arco-design/web-vue;export default defineComponent({name: ModelDetails,props: {// 父级的modalForm: {visible: {type: Boolean,default: false,},title: {type: String,default: ,},},},setup(props, { emit }) {interface IDataManagerMant {loading: boolean;}const dataManagerMant () ({loading: false,});const state: IDataManagerMant reactive(dataManagerMant());// 保存按钮事件function handleOk() {state.loading true;Message.success(保存成功);emit(handleModalOk);state.loading false;}// 返回按钮事件function handleCancel() {emit(handleCancel);}watch(() props.modalForm,(newV, oldV) {if (newV.visible) {// 这里可以写处理化执行的函数方法}});return {...toRefs(state),handleOk,handleCancel,};},});
/script
style langless scoped.modelDetailsPage {width: 100%;height: 100%;padding: 0 12px;}
/style
注意点 1.setup里如果需要接收props和使用emit只需要带参数 setup(props, { emit }) 2.setup里面只需要带emit(‘handleCancel’)不需要带$$符号这个符号是vue2的写法 3.watch监听的方法放在setup里面
