为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

POPMUISE 2019-06-10 09:14:46
问题描述我想做个功能,子组件中有个默认方法,但是子组件通过$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多交流一些朋友
查看完整描述

2 回答

?
PIPIONE

TA贡献1829条经验 获得超9个赞

不懂你想做什么,感觉你的需求完全可以,通过给子组件添加一个ref属性,然后在父组件中this.$refs['childRef'].childDefaultMethod(delFlag)实现。
                            
查看完整回答
反对 回复 2019-06-10
?
翻过高山走不出你

TA贡献1875条经验 获得超3个赞

$emit只是去触发绑定事件,本身又不返回Promise你加上await修饰符也是无用,像这种需求写在$nextTick就能得到更新后的值了
handleDelete(index,row){
this.$emit('delevent',{
index,
row,
});
this.$nextTick(()=>{
console.log(this.delflag);//结果1
if(this.delflag)console.log('del');//结果2
console.log('nodel');//结果3
});
},
vue2.1以后$nextTick不传参会返回Promise可以用await修饰符做伪同步
asynchandleDelete(index,row){
this.$emit('delevent',{
index,
row,
});
awaitthis.$nextTick();
console.log(this.delflag);//结果1
if(this.delflag)console.log('del');//结果2
console.log('nodel');//结果3
},
                            
查看完整回答
反对 回复 2019-06-10
  • 2 回答
  • 0 关注
  • 453 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信