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

这篇文章主要介绍了vue在mounted拿不到props中传递的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

父组件向子组件传递参数
子组件使用props获取

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

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

vue props传值问题 created mounted watch

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

export default{ 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 的，或者取到的一直是默认值。

比如下面这个情况

父组件

 export default{ 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);       })     }   } }

子组件Child

export default{ props:["name"], data(){   return{    data:[]    } }, created(){ console.log(this.name) // unidenfied  ajax异步获取的值  }, mounted(){ console.log(this.name) // unidenfied ajax异步获取的值   } }

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

这情况我是使用watch处理：

export default {     props: ['name'],         data(){             return {                 data: []             }         },         watch: {             //正确给 cData 赋值的 方法             name: function(newVal,oldVal){                 this.data = newVal;  //newVal即是name                 newVal && 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 更新循环之后执行

export default {     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监听数据变化来解决问题。