使用Vue3父子组件编写三级联动

好的，下面是一个使用Vue3父子组件编写三级联动的示例代码：

父组件代码：

<template>
  <div>
    <ChildComp :options="options" v-model="selected"></ChildComp>
  </div>
</template>

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: { ChildComp },
  data() {
    return {
      options: [
        {
          label: '省份1',
          value: 1,
          children: [
            {
              label: '城市1-1',
              value: 11,
              children: [
                {
                  label: '区县1-1-1',
                  value: 111
                },
                {
                  label: '区县1-1-2',
                  value: 112
                }
              ]
            },
            {
              label: '城市1-2',
              value: 12,
              children: [
                {
                  label: '区县1-2-1',
                  value: 121
                },
                {
                  label: '区县1-2-2',
                  value: 122
                }
              ]
            }
          ]
        },
        {
          label: '省份2',
          value: 2,
          children: [
            {
              label: '城市2-1',
              value: 21,
              children: [
                {
                  label: '区县2-1-1',
                  value: 211
                },
                {
                  label: '区县2-1-2',
                  value: 212
                }
              ]
            },
            {
              label: '城市2-2',
              value: 22,
              children: [
                {
                  label: '区县2-2-1',
                  value: 221
                },
                {
                  label: '区县2-2-2',
                  value: 222
                }
              ]
            }
          ]
        }
      ],
      selected: []
    }
  }
}
</script>

子组件代码：

<template>
  <div>
    <select v-model="value" v-if="options.length > 0">
      <option value="">请选择</option>
      <option v-for="option in options" :key="option.value" :value="option.value">{{option.label}}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    value(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    this.$emit('input', this.options[0].value)
  }
}
</script>

以上代码实现了一个三级联动，父组件传入一个options数组作为选项，每个选项都包含一个label、value和children属性，分别代表选项的文本、值和子选项。子组件利用props接收options和value属性，通过v-model实现双向绑定，同时通过watch监听value的变化，当value改变时触发input事件向父组件传递新值。在子组件的mounted钩子函数中，将默认值设置为第一个选项的值。