vue3中父组件数据通过异步请求得到后传给子组件是为空

在一个表单头封装时,选择器的下拉框数据是通过父组件传值得来的,但是出现了父组件有值而子组件为空的情况,但是请求返回是有数据的,所以我自己感觉可能是生命周期问题导致的,就是在我的请求还没有完成的时候,父组件已经把定义的那个字段的初始化的结果传给子组件了,之后找到原因如下:

          只用props进行父子传参,子组件在其一系列生命周期开始时是获取不到数据的。父子组件的生命周期流程如下:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
生命周期钩子是同步执行的,而向后端获取数据是异步的,如果在父组件的created中向后端异步获取数据,根据事件循环的顺序,子组件开始创建时是获取不到数据的。

解决以上问题的办法有以下几种:

        1、使用v-if 来控制子组件是否开始挂载,我们在请求成功之后,所传字段有值时才开始选择挂载子组件。(但是这种请求最好做一个异步的loading,因为当请求加载慢或者出现阻塞时页面面加载时间会比较长,有点影响视觉效果)        2、子组件中用watch更新要使用的数据。但是这种方法适用于当前数字对象没有子节点的。

        3、使用pinia来存储要传的数据,再加上持续化(避免刷新时数据丢失),即可。(请求可以写到store中的ts文件,然后在一进入项目时便调用),这种方法适用于以上两种方法无效,并且其他传参方法也无效时使用,毕竟这个方法中更适用于多个页面都有调用该请求的情况。

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过将Vue数据递给ECharts的实例来实现将Vue数据递到ECharts。下面是一个简单的示例: 首先,确保你已经安装了Vue和ECharts。然后在Vue组件,你可以创建一个ECharts实例,并将Vue数据递给它。以下是一个示例代码: ```html <template> <div> <div ref="chart" style="width: 400px; height: 400px;"></div> </div> </template> <script> import echarts from 'echarts'; export default { mounted() { // 创建ECharts实例 this.chart = echarts.init(this.$refs.chart); // 在mounted钩,监听Vue数据的变化,并更新ECharts图表 this.$watch('chartData', this.updateChart); }, props: ['chartData'], methods: { updateChart() { // 使用Vue数据更新ECharts图表 this.chart.setOption({ // 根据chartData更新图表配置项 // 例如: series: [{ data: this.chartData }] }); } } } </script> ``` 在上面的示例,我们首先引入了ECharts库,并在`mounted`钩创建了一个ECharts实例。然后,我们使用`$watch`方法来监听`chartData`属性的变化,并在变化时调用`updateChart`方法更新图表。 在组件,你可以将Vue数据作为`chartData`属性递给ECharts组件。例如: ```html <template> <div> <echarts-chart :chart-data="chartData"></echarts-chart> </div> </template> <script> import EchartsChart from './EchartsChart.vue'; export default { components: { EchartsChart }, data() { return { chartData: [/* your data */] }; } } </script> ``` 在上面的示例,我们将Vue数据作为`chartData`属性递给ECharts组件。当`chartData`的值发生变化时,ECharts组件会自动更新图表。 这只是一个简单的示例,你可以根据具体的需求进行调整和扩展。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值