怎么用vue父子组件同步传递和异步传递-创新互联

这篇文章将为大家详细讲解有关怎么用vue父子组件同步传递和异步传递，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

1、同步传递数据

父组件 food 通过 props 把 值为 0 的 type 字段传给子组件，子组件在初始化时可以拿到 type 字段，渲染出字符“0 水果”

// 父组件 food.vue


// 子组件 apple.vue

2 异步传递数据

要保证异步传递数据，根据VUE的双向绑定原理，不难得知，异步传递的数据需要watch。

2.1 props

若props传递的数据关联到模板中，则组件初始化时会watch该数据。可见下面代码中的type和info。
若props传递的数据不关联到模板，则为props传递的数据添加watch，在watch方法中修改关联模板的对象。可见下面代码中的child_type。此方法中，watch监听到的是是发生变化的props，故需要对目标对象做初始化处理。

// 父组件 food.vue


// 子组件 apple.vue

2.2 vuex

数据存放在store中，父组件调用vuex中的方法改变数据。
若store的数据关联子组件的模板，则子组件初始化时会watch该数据。
若store的数据不关联子组件的模板，则为store的数据添加watch，在watch方法中修改关联模板的对象。需要对关联模板的对象初始化。

3. 同步或异步传递数据

若父组件向子组件可能同步或异步传递数据，则首先子组件需要在created或者computed中对目标对象初始化，并且子组件中需要watch由props传递的数据，并修改目标对象。

关于怎么用vue父子组件同步传递和异步传递就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。