vue如何通过props方式在子组件中获取相应的对象
这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的记录一下,希望下次不会再犯同样的错误。
子组件定义props,父组件传入数据,子组件在js中获取的时候使用,如果是在html里面,可以直接把变量渲染上去。
我就直接从代码上面来进行
js代码:
//子组件中,定义传入的变量的类型等 props: { data: { type: Array, require: true }, status: { type: Boolean, require: false } }
我们可以直接在生命周期函数里面打印props
mounted(){ let _this=this; console.log(_this._props,9999); }
方法一
所以就可以直接拿取
mounted() { let _this=this; let {datas,status}=_this._props; console.log(datas,999999); },
方法二
有时候会获取不到,可以用一个定时器来获取
mounted() { let _this=this; let {datas,status}=_this._props; setTimeout(()=>{ console.log(this._props) console.log(datas,111111) },2000) }
方法三
深拷贝
mounted() { let _this=this; let props = {..._this._props}; console.log(props,"props.......") },
方法四
利用watch监听
//直接监听data,因为这里的props的变量名为data watch:{ data(newData,prevData){ console.log(newData,123654789) } }
没错啊,我的data就是一个数组。
在这四种方法的逐级使用下,终于获取到了我想要的data。
其实其他几种都是可以的,只是不知道为什么在这次项目中的某个地方,前面几种都失效了,(其他地方是成功的),可能是因为我有毒吧 ╭(╯ε╰)╮。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
elementUI+Springboot实现导出excel功能的全过程
这篇文章主要介绍了elementUI+Springboot实现导出excel功能,现在也对这个导出功能进行一个汇总整理写出来,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
本篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-09-09
最新评论