H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue2,传入的props参数比较大时,在created等各生命周期引用时为空怎么解决?

如下

父组件

<template>
    <my-editor :lesser="lesser" :larger="larger"></my-editor>
</template>

<script>
export default {
   data(){
     return {
       lesser:'lesser',
       larger:''
   },
    mounted:function(){
        this.$http.post('api.example.com/email',data).then(res=>{
            this.larger = res.body.emailText;
        })
    }
}
}
</script>

父组件传如lesser和larger两个参数,lesser很短,larger足够长(约一篇博客长度)

子组件

<template>
    <div contenteditable v-html="larger"></div>
</template>

<script>
export default {
   name:'my-editor',
   props:['lesser','larger'],
   created:function(){
        console.log(this.lesser,this.larger) // ×--> 'lesser',  
        setTimeout(()=>{
            console.log(this.lesser,this.larger) // √--> 'lesser','..一段长文..'
        },1000)
    }
}
</script>

子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。

想问下这种问题怎么解决?好像也没有props完全载入后的生命周期?

补充

开了个新工程对照了一下找到了真正的原因。。例子举得不对已做修正。
应该是父组件ajax获取了后台数据,这个异步获取的数据在子组件中得不到及时呈现,请问这个问题如何解决。

回答:

其实一个很简单的做法就是,当larger获取到数据之后,再开始渲染子组件my-editor
做法就是在my-editor上加v-if

<template>
    <my-editor v-if="larger.length" :lesser="lesser" :larger="larger"></my-editor>
</template>

回答:

1.首先子组件定义created阶段,父组件已经调用过了created阶段,这时,proper属性,data属性,method属性已初始化完成。
2.父子组件的初始化周期,从创建到挂载,是从外到内,再从内到外,且mixins的钩子函数总是在当前组件之前执行。
所以,父组件异步传值,子组件mounted阶段,也不一定能取得值。
因此,建议确定父组件异步获取值之后,再渲染子组件

回答:

可以用vuex插件设置state属性,这样各个组件都能获取到larger

回答:

可以改用 slot,并用 this.$slots.default 来获取。

回答:

既然是父组件ajax耗时的原因,那就在子组件里用watch吧,等watch到数据传递过来再触发操作

回答:

在子组件用mounted钩子就可以了

回答:

created是组件还没挂载,mounted是组件已经挂载了,所以用mounted就能获取到了

回答:

建议去看一下完整的vue的生命周期,created的调用时间是实例创建完成之后的回调钩子,实际上在这个时候$el
是不可见的,所以这个时候你去获取那些数据你当然拿不到

本文地址:H5W3 » vue2,传入的props参数比较大时,在created等各生命周期引用时为空怎么解决?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址