如何在Vue.js中处理异步数据加载和渲染?

我的思路是，子组件内部先根据option的长度判定是否传给Select组件value，当option为空的时候，传给它undefined，然后通过Select的change事件emit数据给父组件，你的单选联动可以在单选改变之后，调子组件的获取options方法

<template>
  <el-select :value="selectVal" @change="handleChange">
    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script>

export default {
  props: ['value'],
  emits: ['update:value'],
  data() {
    return {
      selectOptions: [],
    }
  },
  computed: {
    selectVal() {
      return this.selectOptions.length ? this.value : undefined
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    async getOptions() {
      this.selectOptions = []
      // 异步请求任务
      // awati axios(...)
      this.selectOptions = [
        { value: 'Option1', label: 'Option1', },
        { value: 'Option2', label: 'Option2', },
      ]
    },
    handleChange(e) {
      this.$emit('update:value', e)
    }
  }
}
</script>