vue3中设置一个图层下面有多个图层可以勾选

您可以使用Vue3中的组件和数据驱动的方式来实现设置一个图层下面有多个图层可以勾选的功能。具体实现可以参考以下步骤：

1. 创建一个父组件，用来显示所有图层和勾选状态。可以使用`v-for`指令来循环遍历所有图层，并使用`v-model`指令来双向绑定每个图层的勾选状态。

2. 创建一个子组件，用来显示单个图层和勾选状态。子组件需要接受来自父组件的图层数据和勾选状态，并在用户勾选或取消勾选时向父组件发出事件。

3. 在父组件中使用`props`属性将图层数据和勾选状态传递给子组件，并使用`emit`方法监听子组件发出的事件。

4. 在父组件中使用计算属性来获取已勾选的图层数据，并在用户勾选或取消勾选时更新计算属性的值。

5. 可以使用样式或其他交互效果来区分勾选和未勾选的图层。

下面是一个示例代码：

// 父组件
<template>
  <div>
    <div v-for="(layer, index) in layers" :key="index">
      <layer-checkbox :layer="layer" v-model="layer.checked" @change="updateCheckedLayers"/>
    </div>
  </div>
</template>

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

export default {
  components: {
    LayerCheckbox
  },
  data() {
    return {
      layers: [
        { name: 'Layer 1', checked: false },
        { name: 'Layer 2', checked: false },
        { name: 'Layer 3', checked: false }
      ]
    }
  },
  computed: {
    checkedLayers() {
      return this.layers.filter(layer => layer.checked)
    }
  },
  methods: {
    updateCheckedLayers() {
      // do something
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <label>
      <input type="checkbox" :checked="checked" @change="handleChange"/>
      {{ layer.name }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    layer: {
      type: Object,
      required: true
    },
    value: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    checked: {
      get() {
        return this.value
      },
      set(checked) {
        this.$emit('input', checked)
        this.$emit('change')
      }
    }
  },
  methods: {
    handleChange() {
      this.checked = !this.checked
    }
  }
}
</script>