如何在＜script setup＞当中使用父组件传递过来的数据？

vite+vue3当中组件的js逻辑都是写在<script setup></script>当中的，父组件向子组件传递数据

写法与vue2相同。但是在子组件当中如何使用父组件传递过来的数据，那就很不同了。

手先需要通过方法defineProps去接受父组件的传递过来的数据：

<script setup>
// eslint-disable-next-line no-unused-vars
import { toRefs, computed, nextTick, toRaw, effect } from 'vue';
import { handleTimeUTC } from 'plugins/day';
import {
  handleEchartBar,
  handleEchartLine,
  handleEchartPie,
  handleEchartMoreLine
} from 'plugins/chart';
defineProps({
  isDialog: {
    type: Boolean,
    default: () => false
  },
  chartId: {
    type: String,
    default: () => ''
  },
  dataChart: {
    type: Object,
    default: () => {
      return {} || [];
    }
  }
});
</script>

如果需要在HTML标签当中直接使用，那就直接使用变量isDialog、chartId、dataChart。

如果需要在<script setup>当中使用父组件传递过来的数据，需要对数据做处理，具体如下：

<script setup>
// eslint-disable-next-line no-unused-vars
import { toRefs, computed, nextTick, toRaw, effect } from 'vue';
import { handleTimeUTC } from 'plugins/day';
import {
  handleEchartBar,
  handleEchartLine,
  handleEchartPie,
  handleEchartMoreLine
} from 'plugins/chart';
const props = defineProps({
  isDialog: {
    type: Boolean,
    default: () => false
  },
  chartId: {
    type: String,
    default: () => ''
  },
  dataChart: {
    type: Object,
    default: () => {
      return {} || [];
    }
  }
});
const { chartId } = toRefs(props);
const { dataChart } = toRefs(props);
const idName = chartId.value;
const isDialog = computed({
  get() {
    return props.isDialog;
  },
  set(val) {
    emit('update:isDialog', val);
  }
});
console.log(isDialog.value);
const { data, name } = dataChart.value;
console.log(data.time);
console.log(JSON.stringify(toRaw(data)));
</script>

以上代码当中主要使用了toRefs、toRaw这两个方法对父组件传递过来Proxy对象，做了二次处理后得到基本数据类型和普通对象后，就可以使用了。