«

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

时间:2024-7-25 09:07     作者:韩俊     分类: Javascript


这篇文章主要介绍“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监听数据变化来解决问题。

    标签: javascript vue

    热门推荐