Vue3中页面不能根据props数据动态变化怎么办?

解决方法:使用toRefs结构,使其具有响应式,再使用!

import { reactive, defineProps, toRefs } from 'vue';

const props = defineProps({
  xAxisData: {
    type: Array,
    default: []
  },
  seriesDataEveryDay: {
    type: Array,
    default: []
  },
  seriesDataGu: {
    type: Array,
    default: []
  },
  seriesDataPing: {
    type: Array,
    default: []
  },
  seriesDataFeng: {
    type: Array,
    default: []
  },
  seriesDataHuan: {
    type: Array,
    default: []
  },
  graphicText: {
    type: String,
    default: ''
  }
});

// 使用toRefs结构,使其具有响应式
const { xAxisData, seriesDataEveryDay, seriesDataGu, seriesDataPing, seriesDataFeng, seriesDataHuan, graphicText } = toRefs(props);

 

posted @ 2022-12-25 23:18  RHCHIK  阅读(1593)  评论(0编辑  收藏  举报