vue如何通过props方式在子组件中获取相应的对象
更新时间：2022年04月20日 11:20:08 作者：epines
这篇文章主要介绍了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。
其实其他几种都是可以的，只是不知道为什么在这次项目中的某个地方，前面几种都失效了，（其他地方是成功的），可能是因为我有毒吧 ╭(╯ε╰)╮。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vite3迁移Webpack5的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
vue3使用vuex实现页面实时更新数据实例教程(setup)
在前端开发中往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示,这篇文章主要给大家介绍了关于vue3使用vuex实现页面实时更新数据(setup)的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了Vue封装功能组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了详解vuex的简单todolist例子,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要为大家详细介绍了vue中封装组件的相关知识,文中的示例代码讲解详细,对我们深入了解vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了vue实现显示消息提示框功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue中__ob__: Observer的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue星级评分组件源码,代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue中的局部组件，文章围绕Vue局部组件得相关资料展开内容，需要的的小孩伙伴请参考下面文章的具体介绍，希望对你有所帮助2021-12-12
下面小编就为大家分享一篇vue实现文章内容过长点击阅读全文功能的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
最新评论