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.id
  parcelId.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 }
)