vue3 Ts script-setup 语法糖 父子组件通信 使用sync,defineEmit,defineProps,defineExpose

较比更加简洁化

真香～

父组件

<template>
  <div class="point-dist">
    <div class="point-dist-top">
      <div class="point-msg-top">
        <point-map
          ref="mapBox" // 绑定ref 通过ref取子组件方法 参数 
          @getMapData="getMapData"
          :mapElement="mapElement"></point-map>
        <nation-station-msg
          :nation-data="state.stationData"
          :state-data="state.stateList"
          :item-checked="itemCheck"
          @update:item-checked="itemCheck = $event"> // 类似vue2 item-checked.sync 修饰符 vue3取消sync修饰符改为v-bind
          </nation-station-msg>
      </div>
  </div>
</template>

<script setup lang="ts">

const state = reactive<any>({
    stationData: [],
    stateList: []
})

const mapBox = ref<any>(null)

const getMapData = (data:any) => {
  import('../../../assets/json/station/' + data + '.json').then((res:any) => {
    mapData = res.default
    mapBox.value.getMapEvent(mapData.stationStatusDetailList)
    state.stationData = mapData.hourEleDataList
    state.stateList = mapData
  })
}


</script>

绑定ref 子组件必须defineExpose暴露方法或参数 语法糖不像setup（）帮你return方法或者参数 取值就是 XXX.value.XXXX

子组件 point-map

(defineEmits, defineProps, withDefaults, defineExpose)

<script setup lang="ts">
import moment from 'moment'
import {onBeforeMount, onMounted, reactive, ref, watch, defineEmits, defineProps} from ’vue‘
import MapCore from '../MapCore/index.vue'

interface Props {
  mapElement?: object[]
}

const props = withDefaults(defineProps<Props>(), {
  mapElement: () => []
})

const mapE = ref<any>(null)
const emit = defineEmits(['getMapData'])

const getData = () => {
  const time = moment().format('YYYY-MM-DD HH')
  const url:string = (mapElements[checkedNum.value] as any).icon
  emit('getMapData', url)
}

const getMapEvent = (data:any) => {
  mapE.value.initMapData(data)
}

defineExpose({
  getMapEvent
})
</script>

子组件 nation-station-msg

(defineEmits, defineProps, withDefaults)

<script setup lang="ts">
import EchartsLoopBar from './EchartLoopBar/index.vue'
import StatusMessage from './StatusMessage/index.vue'
import {computed, defineEmits, reactive, watch} from 'vue'

interface KV<T = any> {
  [key: string]: T;
}

interface Props {
  nationData?: any,
  statusStationData?: any,
  itemChecked?: string,
  stateData?: any
}
const emit = defineEmits(['update:itemChecked'])

const props = withDefaults(defineProps<Props>(), {
  nationData: {},
  itemChecked: 'hour',
  stateData: {},
  statusStationData: {
    inTime: 91,
    overdue: 0,
    lackCharge: 0,
    total: 91
  }
})

const nationDataType = computed({
  get() {
    return props.itemChecked
  },
  set(val) {
    emit('update:itemChecked', val)
  }
})

const state = reactive<any>({
  runData: {},
  stateData: {}
})

const checkedDataType = (type:string) => {
  nationDataType.value = type;
}
</script>