vue父页面调用子页面及方法及传参，鼠标光标定位

项目场景：

vue父页面调用子页面及方法

---

问题描述

vue中父界面调用子界面及方法时界面可以调用，但是调用方法的时候第一次报错，但是关掉界面再次重新打开就没问题了

---

原因分析：

在我之前添加鼠标指针定位的时候，如果在当前页面可以直接定位，但是如果在el-dialog弹出框里展示定位鼠标光标的话就会实现不了，原因是需要设置setTimeout(() => { }, 200) 延迟因为我直接找的解决方案所以原因没有过于去看，但是我分析应该是方法执行的太快，在界面打开之前就已经获取了，但是界面没打开所以无法获取位置，导致方法失败，于是我加在了调用子界面方法上解决了

---

解决方案：

1.首先是将子界面引入到父界面然后使用components自定义组件

   （1） import CardRecharge from "../xxxxx/xxxxx.vue";

   （2） components: {
            CardRecharge,
        },

2.，调用子界面的代码,

  

 <el-dialog title="患者信息" v-model="patInfDialogVisible" width="80%" >
            <CardRecharge ref="pFication" :CARD_NO="select_Bed_Ary.CARD_NO"></CardRecharge>                
            <template #footer > 
                <span class="dialog-footer" style="align-items: ;">
                    <el-button size="default" type="success"  @click="pFicationOnSave" >确认</el-button>
                    <el-button size="default" @click="patInfDialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

3.这里是给子界面传入选择数据字段，需要配合第一步的:CARD_NO="select_Bed_Ary.CARD_NO"使用，这个是方法传参，也可以将数据放到缓存中传参

    const handleClick = function(row, event, column) {

_this.select_Bed_Ary.CARD_NO=row.CARD_NO,}

4.这里是调用子界面的方法

	const pFication =ref(null);
			const pFicationOnSave = function(){
				
				setTimeout(() => {
					_this.patInfDialogVisible=false;
					_this.getCardDate();
				}, 200)
			}
			const onAvatar=function(item,state){
				if(state == '1'){
					 _this.select_Bed_Ary=item;
					pFication.value.getEssentialInform()
					_this.patInfDialogVisible=true;
					pFication.value.ClearScreen()
				}else{
					_this.patInfDialogVisible=true;
//这里就是添加了延时调用自界面方法
					setTimeout(() => {
						pFication.value.getEssentialInform() 
					}, 200)
					
				}
			};

5.以上是父级界面代码。

子界面代码

1.使用props传值这个介绍可以看这个连接

vue中组件的props属性（详）_suoh's Blog的博客-CSDN博客_vue props

将父界面值传过来加到调用的方法作为传递的参数

然后使用语法糖暴露一下子页面的方法让父界面调用

    // 父组件调用子组件时的方法暴漏
            defineExpose(()=>{
                getEssentialInform,
                ClearScreen,
                Recharge
            }); 

以上就是vue3父界面调用子界面，传参的方法和遇到的问题的解决方案，只总结个人情况，解决参考

附加鼠标光标定位：

 

五、vue3.0之组件通信详解(defineProps、defineEmits、defineExpose)_arguments_zd的博客-CSDN博客_defineprops

 第三张图片是条件满足之后执行光标定位，我这里是当el-dialog弹出框打开的时候定位到某个输入框，根据需求设置

以上就是我的总结，感谢观看。