vue父组件异步获取数据并将其传输给子组件的方法

但是现在的问题是，父组件的数据是异步获取的，子组件将在开始时呈现。如果此时没有传入数据，并且子组件需要在数据中使用length属性，它将报告一个错误：

我该怎么办？最简单的方法是让子组件有条件地呈现，并且只在有数据的时候呈现，这样就不会抛出错误。

然而，这并不完美。子组件通常不直接使用父组件发送的值。第二种是监听，然后在有变化时给数据赋值。渲染时使用数据中的数据，保证数据随时动态更新。

prop :[' floor goods ']，data(){ return { flgoods : } }，watch : { floor goods(val){ this . flgoods=val；console . log(val)；}}在一种方法中，使用Promise方法在父组件中异步执行数据分配：

新承诺((解决，拒绝)={如果(RES . status===200){解决(RES)；}}).然后((RES)={ this . category=RES . data . data . category；this . adbar=RES . data . data . ADdress espicture . picture _ ADdress；this . bannerswippics=RES . data . data . slides；this . recommend goods=RES . data . data . recommend；//也可以异步获取，然后传递给子组件PromiseThis。floor stai food=RES . data . data . floor 1；this . floor buffer=RES . data . data . floor 2；this . Bloomburs=RES . data . data . floor 3；console . log(this . floor fruits)；这个。_ init scroll()；})}).catch(err={ console . log(err))；});这也是可能的。异步数据采集导致的错误报告会出现在各种场景中。例如，当根据数据呈现dom并且在dom上执行js操作时，找不到响应dom元素来报告错误，因为它还没有被呈现。这里可以使用vue提供的$nextTick()函数，或者手动启动一个setTimeout定时器来延迟采集；使用better-scroll时，由于dom没有渲染，无法获得滚动元素的高度，导致无法滚动。还可以使用vue提供的这个函数来初始化dom呈现后的滚动。

摘要

以上是边肖介绍的vue父组件异步获取数据并传输给子组件的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！