<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",
})
<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="联系人" >
<el-input 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({
// directorName: [{ 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)
}
// 监听双向绑定值改变,用于回显
watch(
() => props.modelValue,
(val) => {
state.childModelValue= val;
},
{
deep: true,
}
);
</script>
标签:const,log,ref,props,ts,vue3,组件,console,modelValue
From: https://www.cnblogs.com/linhan8888/p/17846192.html