vue在mounted拿不到props中传递的数据怎么解决

这篇文章主要介绍“vue在mounted拿不到props中传递的数据怎么解决”，在日常操作中，相信很多人在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 的，或者取到的一直是默认值。

比如下面这个情况

父组件

<template><div id="app">    <Child :name="data"></Child></div></template>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监听数据变化来解决问题。

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