vu3监听父组件传值给封装的子组件Echarts, 避免初始化Echarts后的二次渲染

最新推荐文章于 2023-11-28 09:46:03 发布

j4314_0315

最新推荐文章于 2023-11-28 09:46:03 发布

阅读量243

点赞数

文章标签： echarts javascript

本文链接：https://blog.csdn.net/j4314_0315/article/details/131321665

版权

父组件从网络获取到数据后将数据通过props的方式传递给子组件，子组件如何监测更新并做进一步逻辑？

// 父组件传参
<template>
 <div>
    <histogram id="histogram" :data="data"></histogram>
 </div>

<script setup>
import { ref, onMounted } from "vue";
// 定义子组件获取的值[时间，参数]
const data= ref([['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],[120, 100, 150, 80, 70, 110, 130]])

// 挂载时获取请求回来的数据赋值给data
</script>





// 子组件接收
<script setup>
import { onMounted , ref , watch } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  data: Array,
})

// 通过监听父组件获取网络请求后传来的值，再去渲染Echarts
watch(()=>props.doctorData , (newVal,oldVal) => {

  // console.log('新',newVal,'旧',oldVal)
  option.xAxis.data = newVal[0]
  option.series.data = newVal[1]

  initeCharts()
})


const initeCharts = () => {
  const myChart = echarts.init(document.getElementById(''))
  // 绘制图表
  myChart.setOption(option)
} 

</script>

代码简洁，望理解。希望帮到大家！