1. 使用ref定义数据

/**
 * 类型
 */
type TimeType = "CREATE_TIME_TYPE" | "SUBMIT_TIME_TYPE" | "WRITE_OFF_TIME_TYPE";
//查询类型rechargeAccount, raffleProductId, rechargeProductId, productCount
 interface QueryParams {
  queryTimeType: TimeType;
  startTime: string;
  endTime: string;
  detailOrderNo: string;
  banStatus: string;
  customerNo: string;
  subOrderNo: string; //子单号
  rechargeOrderNo: string; //第三方订单号
  activityId: string; //活动id
  productType: string;
  orderSubStatus: string;
  productName: string; //产品名称
  productNo: string; //产品编号
  bankOutletNo: string; //银行网点编号
  orderSource: string; //订单来源
  projectId: string; //项目id
  userId: string; //项目用户id
  userAssociationId: string; //项目用户uid
  payType: string; //支付方式
  telephone: string; //参与用户手机号
  chengQuanId: string;
  payMerId: string;
  rechargeAccount: string; //账号
}
//数据定义
const queryParams = ref<QueryParams>({
  startTime: "",
  endTime: "",
  detailOrderNo: "", //总订单号
  subOrderNo: "", //子订单号
  rechargeOrderNo: "", //第三方订单号
  chengQuanId: "", //橙券会员结算账户
  projectId: "", //项目ID
  activityId: "", //活动
  productType: "",
  productName: "", //内部产品名称
  productNo: "", //产品编码
  bankOutletNo: "", //银行网点编号
  orderSource: "", //订单来源,
  orderSubStatus: "", //订单状态
  userId: "", //项目用户ID
  userAssociationId: "", //UID
  payType: "",
  telephone: "",
  payMerId: "", //支付商户号
  banStatus: "", //禁止补单状态
  customerNo: "", //客户号
  rechargeAccount: "", //充值账号
  queryTimeType: "CREATE_TIME_TYPE" //查询类型
});

reactive 通常用于form表单校验的时进行定义

//在使用form表单校验时，reactive的TS类型为FormRules

//示例
//1. 引入TS类型
import {  FormRules } from "element-plus";
//书写表单校验
const batchImportRules = reactive<FormRules>({
  //和写vue2校验规则一样
  file: { required: true, message: "请上传文件", trigger: "change" }
});

提交数据时form表单校验（类似vue2的this.$refs.dom.validate）

//1. 需要在template dom元素（el-form）上定义一个ref
<el-formweb
  ref="importBatchFormRef"
  :model="batchImportForm"
  :rules="batchImportRules"
  label-width="0px"
>
....
</el-form>
<d-button
  v-prevent-re-click
  type="primary"
  :loading="btnDisabled"
  @click="sureBatchImportBtnClick(importBatchFormRef)"
>
  确定
</d-button>
//2. 在script中定义ref（此处ref的名字与dom上的ref名字必须保持一致）
import {FormInstance} from "element-plus";
const importBatchFormRef = ref<undefined | FormInstance>(undefined);

//3. 提交表单时候的校验
const sureBatchImportBtnClick = (formEl: FormInstance | undefined)=>{
    formEl?.validate(valid=>{
        if(valid){
            serve.xxx
        }
    })
}

route

import {useRoute} from "vue-router"

const route = useRoute();

console.log(route.query.productId)

router

import {useRouter} from "vue-router"

const router = useRouter();

router.push({
    path:"",
    query:{}
})

watch 监听路由变化

import { watch } from 'vue'
import {useRouter} from "vue-router"

const router = useRouter();

//监听路由变化
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    //获取地址栏参数，如果监听路由变化就不需要额外使用route获取地址栏参数
    const { productId, projectId } = newValue.query
    productDetailParams.value.productId = productId
    productDetailParams.value.projectId = projectId
    getProductDetail()
  },
  { immediate: true }
)

//额外参数
deep：true
清楚副作用

provide/inject

//父子爷孙 传参
//provide
import {provide} from "vue"
const test = ref<string>('1')
provide("componentInfo", test); //或者将test.value传递给其它页面

//inject
import {inject} from "vue"

const testInject = inject<string>('componentInfo')

//使用的时候 需要看你传递过来的是一个普通对象还是ref对象；如果是ref对象使用的时候需要.vlaue

console.log(testInject.value) //或者是testInject（和provide上下对应起来）