vue问题：父传子时传递的值接收有延迟

 

素材编辑 | 宋大狮

排版运营 | 小唐狮

ONE 问题描述

今天在做vue项目时，遇到一个不算问题的问题。父组件要向子组件传递接口请求回来的数据，然后在子组件中将props接收到的数据渲染到输入框内，操作非常非常简单，但是我发现不管怎么搞，渲染的值都是父组件中定义的初始空值。

TWO 解决过程

尝试一：

思路：考虑是否是接口问题，或者组件传参时出错。

实现：使用祖传手法console.log，从接口请求处开始挨着打印，一直到子组件接收的值处为止。

结果：接口没有问题，但打印的所有值都为空。

尝试二：

思路：父组件给子组件传递的值是请求回来的，所以可能会有延迟。

实现：在父组件中，给子组件标签加上v-if判断一下，判断要传递的值不为空时，再初始化子组件。

结果：成功传递接口返回的数据。

THERE 知识总结

总结一：

问题复盘

由于父组件在给子组件传递的值是请求回来的，所以会有延迟，而这时子组件也初始化完毕，导致子组件接收的值是父组件初始化时创建的默认为空的初始值。在父组件中给子组件标签加上v-if判断一下，判断要传递的值不为空时，再初始化子组件，就可以接收到父组件请求回来的值。

总结二：

组件通信方式总结

父传子
    1、props：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过props进行接收
    2、$parent：直接访问父组件实例的属性和方法
    3、$attrs：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过$attrs进行接收【与props不能共存】【vue新增的祖孙传参方式】
    4、插槽

子传父
    1、自定义事件：在父组件中，给子组件绑定一个自定义事件，绑定事件的值为接收参数的函数，在子组件中，通过$emit发送数据
    2、$refs：直接访问子组件实例的属性和方法
    3、$children 直接访问子组件实例的属性和方法【返回数组，必须遍历赋值后才能渲染】

祖传孙
    1、provide函数传，inject数组收
    2、自定义属性 + v-bind="$attrs"【中间人】 + $attrs

孙传祖
    1、$emit + v-on="$listeners"【中间人】 + 自定义事件

兄弟间
    1、$bus：给vue原型添加一个vue实例，用this.$bus.$emit发送，用this.$bus.$on接收
    2、Vuex
    3、pubsub

路由跳转传参
    params传参
    query传参

    

FOUR 集思广益

欢迎各位大佬对此类问题留言或私信指教，让大家一起学习提高！

- END -

ABOUT 关于作者

• 宋大狮 | 轻轻松松工作，简简单单生活

• 小唐狮 | 广场舞大军中最靓的仔