免费资源部落

这篇文章主要介绍“vue在mounted拿不到props中传递的数据怎么解决”，在日常操作中，相信很多人在vue在mounted拿不到props中传递的数据怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue在mounted拿不到props中传递的数据怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

vue mounted拿不到props中传递的数据

父组件向子组件传递参数

子组件使用props获取

但是当子组件中代码异步的时候，可能会出现created和mounted中取不到传递过来的参数的情况。

exportdefault{props:{courseDetail:{type:Object,},},data(){return{}},watch:{//监听对象中的某个值也可以直接监听某个对象'courseDetail.id'(newValue,oldValue){//异步方法this.getCommentList()}}}vue props传值问题 created mounted watch

props 传值在子组件定义props 关于mounted created获取问题

exportdefault{props:["name"],data(){return{data:this.name}},created(){console.log(data);//小明console.log(this.name)//小明}，mounted(){console.log(data);//小明console.log(this.name)//小明}

当props是动态获取的时候AJAX请求获取的数据

你的 name里面的值并不是固定的，而是动态获取的，这种情况下，你会发现 methods 中是取不到你的 chartData 的，或者取到的一直是默认值。

比如下面这个情况

父组件<template><divid="app"><Child:name="data"></Child></div></template>exportdefault{props:["name"],data(){return{data:[]}},mounted(){this.getAddName();},methods:{getAddName(){axios.post(api,{params}).then(res=>{this.data=res.data.name}).catch(err=>{consloe.log(err);})}}}子组件Childexportdefault{props:["name"],data(){return{data:[]}},created(){console.log(this.name)//unidenfiedajax异步获取的值},mounted(){console.log(this.name)//unidenfiedajax异步获取的值}}

解决动态获取props取值传值问题

这情况我是使用watch处理：

exportdefault{props:['name'],data(){return{data:[]}},watch:{//正确给cData赋值的方法name:function(newVal,oldVal){this.data=newVal;//newVal即是namenewVal&&this.dataChild();//newVal存在的话执行dataChild函数}},methods:{dataChild(){//执行其他逻辑}},　　　　　mounted(){//在created、mounted这样的生命周期,给this.data赋值会失败,错误赋值方法//this.data=this.name;}}

监听 name 的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在 watch 里面执行。

数据渲染问题

props 渲染时，直接使用 在DOM上使用{{name}}渲染

针对于动态渲染DOM的操作问题：使用this.n e x t T i c k ( ) / / 等 待 渲 染 t h i s . nextTick() //等待渲染 this.nextTick()//等待渲染this.nextTick()将回调延迟到下次 DOM 更新循环之后执行

exportdefault{props:['name'],data(){return{data:[]}},watch:{//正确给cData赋值的方法name:function(newVal,oldVal){if(newVal){//当newVal数据发生改变时this.$nexTick(()=>{//等待newVal数据渲染完成document.getElementById(ID).style.backgroundColor="#fffff";})}}},methods:{dataChild(){//执行其他逻辑}},　　　　　mounted(){//在created、mounted这样的生命周期,给this.data赋值会失败,错误赋值方法//this.data=this.name;}}props总结

获取不到props的原因：

因为父组件中要传递给子组件的 props 属性 是通过 ajax请求获取的， 请求的这个过程是需要时间的异步获取等待返回，然而子组件的渲染要快于ajax请求过程，所以此时在created 、 mounted 只执行一次的生命钩子函数中，执行完成后，此时 props 还没有传递（子组件），所以只能获取默认的props值，当props获取ajax完成后传递进来，此时生命周期函数已经执行完成。所以wacth监听数据变化来解决问题。

到此，关于“vue在mounted拿不到props中传递的数据怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！