组件之间传值(父子传值,爷孙传值)

父子传值,爷孙传值)"/>

组件之间传值(父子传值,爷孙传值)

父组件

	<DesignateTeacherv-if="isDesignateTeacher"v-model="isDesignateTeacher":assignTeacher="assignTeacher"@handleTeacherOk="refreshList"@reflash="searchReserveApplys"></DesignateTeacher>
import { ref, reactive, provide } from 'vue'const isDesignateTeacher = ref(false)
const assignTeacher = reactive({})    //指派老师
const handleDesignateTeacher = (val) => {if (new Date().getTime() > Date.parse(val.reserve_time)) {ElMessageBox.alert('不可指派！该预约已超时，请等待学生重新预约。', '提示', {confirmButtonText: '确定',center: 'true',})} else {assignTeacher.value = valisDesignateTeacher.value = true}
}//修改指导棋老师
const isTips = ref(false)
const handleAuditingApply = (val) => {if (new Date().getTime() > Date.parse(val.reserve_time)) {ElMessageBox.alert('当前指导棋已完成，不可修改。', '提示', {confirmButtonText: '确定',center: 'true',})} else {assignTeacher.value = valisTips.value = true}
}
// 修改指派成功后
const refreshList = (val) => {console.log(val)isTips.value = falseisDesignateTeacher.value = falsegetReserveApplys()
}
provide('assignTeacher', assignTeacher)

子组件

const emits = defineEmits(['update:modelValue', 'reflash', 'handleTeacher'])const props = defineProps({assignTeacher: { type: Object },modelValue: { type: Boolean },
})//指派老师
const multipleTableRef = ref(null)
const multipleTable = ref([])
// const assign = inject('assignTeacher')
const setAssignTeachers = async () => {let params = {id: props.assignTeacher.value.id,teacher_id: multipleTable.value[0].t_id,}// debuggerconsole.log(multipleTable.value[0].t_id)console.log(multipleTable.value)let res = await setAssignTeacher(params)if (res.code == 0) {emits('update:modelValue', false)emits('reflash')ElMessage({message: '指派成功',type: 'success',})emits('update:modelValue', false)emits('handleTeacher', { ...multipleTable.value, id: props.assignTeacher.value.id })} else {ElMessage({message: '指派失败',type: 'error',})emits('update:modelValue', false)}
}

隔代传值

父组件参照上面的父组件

子组件

import { ref, inject } from 'vue'
const emits = defineEmits(['update:modelValue', 'handleTeacherOk'])
const props = defineProps({modelValue: { type: Boolean },assignTeacher: { type: Object },
})
const assign = inject('assignTeacher');//指派老师
const isDesignateTeacher = ref(false)
// const assignTeacher = ref({})const handleTeacher = (val) => {isDesignateTeacher.value = true
}

孙子组件

参照上面的父子传值的子组件