1.引用watch
import { onMounted ,watch} from 'vue'
2 父组件页面数据传递
<EchartsOrder :orderData="User.data" :orderList="User.orderList" :orderName="User.orderName" :orderStr="User.orderStr" />
3.下面是子组件接收的数据
const props = defineProps({
orderData:Array,
orderList:Array,
orderName:String,
orderStr:String,
})
4.子组件实时监听 (setTimeout 这里是由于图表渲染快于父元素导致图表比例溢出,做的一个延缓操作)if判断如果新数据与旧数据不相等,刷新line(),
// 监听父组件数据实时更新
watch(
() => [props.orderName, props.orderData,props.orderList,props.orderStr],
(newValue, oldValue) => {
if(newValue!=oldValue){
setTimeout(() => {
line()
}, 400)
}
}
)