vue3 ts 父子 组件小例子

父组件

<project-tab ref="projectTabRef" v-model="form.projectVO" :data="parentToChild" @update="updateHandler"></project-tab>

//引用组件
const ProjectTab = defineAsyncComponent(() => import('./tabsProject.vue'));
const projectTabRef = ref();

const updateHandler = (param) => {
    console.log("项目保存回调")
   console.log(param)
}

const parentToChild = reactive({
    typeName: "公司立项申请",
    tableName: "company_launch",
    tablePkColumnName: "task_id",
})

子组件

<template>
    <div style="overflow:auto;">
        <el-form ref="tabProjectRef" :model="state.childModelValue" :rules="tabProRules" label-width="100px" v-loading="loading">
            <el-form-item label="项目名称" prop="state.childModelValue.projectName">
                <el-input v-model="state.childModelValue.projectName" placeholder="请输入项目名称"/>
            </el-form-item>
            <el-form-item label="联系人" prop="manager">
              <el-input  v-model="state.childModelValue.manager" placeholder="请输入联系人"/>
            </el-form-item>
	</el-form>
        <el-button @click="btntabsProSee">查看</el-button>
    </div>
</template>

<script setup lang="ts">

import {watch} from "vue";

const tabProjectRef = ref();
const visible = ref(false)
const loading = ref(false)


// 定义校验规则
const tabProRules = ref({
    manager: [{ required: true, message: '请填写负责人啊', trigger: 'blur' }],
    // projectVO: {
    //     projectName:[{ required: true, message: '申请项目不能为空', trigger: 'blur' }]
    // },
})

const emit = defineEmits(['update:modelValue','other']);

const props = defineProps({
    modelValue:{type: Object} ,//[String, Array],
    data: {
        type: Object,
    },
});

const state = reactive({childModelValue: props.modelValue});

const btntabsProSee = ()=>{
    // emit("other",{hle:"我回来了",hll1:1})
    // emit("update:modelValue",state)
    // console.log(props.data)
    // console.log(props.modelValue)
    // console.log(state)
    const valid =  tabProjectRef.value.validate().catch(() => {
    });
    if (!valid) return false;
}
// 监听双向绑定值改变，用于回显
watch(
    () => props.modelValue,
    (val) => {
        state.childModelValue= val;
    },
    {
        deep: true,
    }
);
</script>