vue3的一些浅显用法

1/ 父页面调用子页面相关

     需要在父页面引用 

<FieldUserForm ref="userFormRef" @success="handleUserFormSuccess" />

其中  FieldUserForm 是子页面 

@success="handleUserFormSuccess" 是子页面成功后回调方法 父页面 实现 handleUserFormSuccess 方法

子页面相关：

// 暴露方法给父组件
defineExpose({open
})

需要写个方法暴露给父组件，子页面实现 open 方法 相当于 初始加载类

2 子页面完成任务后 调用子页面 相关

// 定义 emit 事件
const emit = defineEmits(['success'])// 自己的子方法最后通知父组件刷新列表emit('success')

3/通过 路由传值

<router-link :to="'/nongyeParcel/type/field/' + scope.row.id"><el-button link type="primary">条田管理</el-button></router-link>

子页面接受参数 

onMounted(() => {// 修复：使用 route.params.dictType 而不是 route.params.idparcelId.value = Array.isArray(route.params.id)? (route.params.id[0] ?? ''): (route.params.id ?? '')console.log('parcelId.value', parcelId.value)getList()
})// 使用类型守卫处理赋值
watch(() => route.params.dictType,(newVal) => {// 使用类型守卫确保 parcelId 总是 string 类型parcelId.value = Array.isArray(newVal)? (newVal[0] ?? ''): (newVal ?? '')},{ immediate: true }
)