利用Vue3实现拖拽定制化首页功能

<template>
  <div class="component-box">
     <component :is="xxx""/>          
  </div>
</template>
<script>
import xxx from 'xxx.vue'
export default{
    data(){
        return{

        }
    },
    components:{
        xxx
    }
}
</script>

<div class="component-box" v-for="element in xxx">
  <component :is="element.name" :key="element.name"/>
</div>

import { defineAsyncComponent, ref } from 'vue'
// 需要加载的组件集合
const components = ref(new Map<string, any>())
components.value.set(
  'test1',
  defineAsyncComponent(() => import('./test1.vue'))
)
components.value.set(
  'test2',
  defineAsyncComponent(() => import('./test2.vue'))
)

import { shallowRef, ref } from 'vue'
  import test1 from './test1.vue'
  import test2 from './test2.vue'
 
  //这里用ref的话，vue给出警告Vue接收到一个组件，该组件被制成响应对象。这可能会导致不必要的性能开销，应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“ref”来避免。
  
  // 如果使用 markRaw 那么currentComp将不永远不会再成为响应式对象。 所以得使用 shallowRef
  let currentComp = shallowRef(test1)  
 currentComp.value
  // 切换组件
  const changeComp = () => {
    if(currentComp.value == test1) {
      currentComp.value = test2
    }else {
      currentComp.value = test1
    }
  }

<script lang="ts">
import {
  Test1,
  Test2,
} from './components/DragComponents'

export default {
  components: {
    Test1,
    Test2,
  }
}
</script>
<script setup lang="ts">
const componentList = reactive([
  {
    name: 'Test1',
    title: '测试1',
    id: '1'
  },
  {
    name: 'Test2',
    title: '测试2',
    id: '2'
  }
])
</script>