猿问

小白,请教各位大佬!props传值存在的一些问题,万分感谢

问题描述我想做个功能,子组件中有个默认方法,但是子组件通过$emit方法先执行父组件的业务判定,父组件通过改变props的值通知子组件,子组件如果获取为false后不执行默认方法,否则执行默认方法。问题出现的环境背景及自己尝试过哪些方法相关代码//请把代码文本粘贴到下方(请勿用图片代替代码)子组件中props:{delflag:true},watch:{delflag(n,o){console.log(1);//结果4console.log(n);//结果5console.log(2);//结果6},}methods:{asynchandleDelete(index,row){awaitthis.$emit("delevent",{index,row});console.log(this.delflag);//结果1if(this.delflag)console.log("del");//结果2console.log("nodel");//结果3}}父组件:@editevent="edit"del(pval){this.delflag=false}执行顺序结果:结果1true结果2del结果3nodel结果41结果5false结果62你期待的结果是什么?实际看到的错误信息又是什么?我希望改变props的值执行后,子组件能够立即获取父组件的判定结果,控制子组件事件是否执行,或通过其他途径实现相关业务逻辑如果大家有什么不明白的可以QQ联系我86953422,长期在线,该问题我觉得很有用,在我设计的架构中,很多地方都能用到,也希望通过这个QQ多交流一些朋友
POPMUISE
浏览 454回答 2
2回答

PIPIONE

不懂你想做什么,感觉你的需求完全可以,通过给子组件添加一个ref属性,然后在父组件中this.$refs['childRef'].childDefaultMethod(delFlag)实现。

翻过高山走不出你

$emit只是去触发绑定事件,本身又不返回Promise你加上await修饰符也是无用,像这种需求写在$nextTick就能得到更新后的值了handleDelete(index,row){this.$emit('delevent',{index,row,});this.$nextTick(()=>{console.log(this.delflag);//结果1if(this.delflag)console.log('del');//结果2console.log('nodel');//结果3});},vue2.1以后$nextTick不传参会返回Promise可以用await修饰符做伪同步asynchandleDelete(index,row){this.$emit('delevent',{index,row,});awaitthis.$nextTick();console.log(this.delflag);//结果1if(this.delflag)console.log('del');//结果2console.log('nodel');//结果3},
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答