learn-vue 动态组件

动态组件

1	<component :is="comp"></component>

import tree from "../../components/tree/index.vue";
import folder from "../../components/folder/index.vue"

let comp = tree
const switchComp = () => {
    //切换
}

在setup语法糖下，is绑定的必须是组件实例，而不能是组件名。

采用vue2的写法才会使组件名直接关联到组件，可以用组件名。

一个实例

代码稍微复杂点，主要是结合了父子组件的传参，直接把全部代码贴在这里了~

<template>
  <div class="menu">
    Menu
    <div style="display: flex; flex-direction: column">
      <div @click="switchComp(item)" v-for="(item,index) in comps" :key="index">{{item.name}}</div>
    </div>
    <hr>
    <component ref="compIns" :is="curComp.comp" :data="curComp.data" @on-mounted="curComp.onMounted" @on-click="curComp.onClick"></component>
  </div>
</template>

<script setup lang="ts">
import {markRaw, reactive, Ref, ref} from "vue";
import tree from "../../components/tree/index.vue";
import folder from "../../components/folder/index.vue"

type TreeList = {
  name:string,
  icon?:string,
  children?:TreeList[] | [],
  hover:boolean
}

let data = reactive<TreeList[]>([
  {
    name:'no.1',
    hover:false,
    children:[
      {
        name:'no.1-1',
        hover:false,
        children:[
          {
            name:'no.1-1-1',
            hover:false,
            children:[]
          }
        ]
      }
    ]
  },
  {
    name:'no.2',
    hover:false,
    children:[
      {
        name:'no.2-1',
        hover:false,
        children: []
      }
    ]
  },
  {
    name:'no.3',
    hover:false
  }
])

const clickTreeItem = (treeItem:TreeList) => {
  console.log(treeItem)
}

type Folder = {
  id:number,
  name:string,
  isFolder:boolean,
  children?:Folder[]
}
type FolderIns = {
  data:Folder
}
let folders = ref(null)
let folderIns = folders.value as unknown as FolderIns

let folderData = reactive<Folder>({
    id:0,
    name:'folder.0',
    isFolder:true,
    children:[
        {
    id:1,
    name:'folder.1',
    isFolder:true,
    children:[
      {
        id:2,
        name:'folder.1-1',
        isFolder:false,
      },
      {
        id:4,
        name:'folder.1-2',
        isFolder:false
      }
    ]
  },
  {
    id:3,
    name:'folder.2',
    isFolder:true
  }
]
})


const clickFolder = (folder:Folder) => {
  if (folder.isFolder) {
    folderIns.data = folder
  }
  console.log(folderIns)
}

const initFolder = () => {
  folderIns = compIns.value as unknown as FolderIns
  folderIns.data = folderData
}

type Comp = {
  name:string,
  comp:any,
  onClick?:any,
  onMounted?:any,
  data?:any,
  ref?:any
}

let compIns = ref(null)

let comps = reactive([
  {
    name:"tree",
    comp:markRaw(tree),
    onClick:clickTreeItem,
    data:data
  },
  {
    name:"folder",
    comp:markRaw(folder),
    onClick:clickFolder,
    onMounted:initFolder,
    ref:ref(null)
  }
])

let curComp:Ref<Comp> = ref(comps[0])

const switchComp = (item:Comp) => {
  curComp.value = item
  console.log(curComp.value.ref)
}

</script>

<style lang="less" scoped>
.menu{
  width: 200px;
  border-right: 1px solid #213547;
}
</style>

tree

<template>
  <div>
    <div @click.stop="clickTreeItem(item)" :key="index" v-for="(item,index) in data" class="tree">
      {{item.name}}
      <TreeItem @on-click="clickTreeItem" v-if="item?.children?.length" :data="item.children"></TreeItem>
    </div>
  </div>
</template>

<script setup lang="ts">
import {Ref, ref} from "vue";

type TreeList = {
  name:string,
  icon?:string,
  children?:TreeList[] | [],
  hover:boolean
}

type Props = {
  data?:TreeList[]
}

defineProps<Props>()

const emit = defineEmits(['on-click'])
const clickTreeItem = (treeItem: TreeList) => {
  emit('on-click', treeItem)
}

</script>

<script lang="ts">
export default {
  name: "TreeItem"
}
</script>

<style scoped lang="less">
.tree{
  margin-left: 10px;
}
</style>

folder

<template>
  folder
  <button @click="backup">back up</button>
  <div v-for="(item, index) in path" :key="index" @dblclick="clickPath(index)">
    {{item.name}}
  </div>
  <hr>
  <div v-for="(item, index) in data.children" :key="index" @dblclick="clickFolder(item)">
    {{item.name}}
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref} from "vue";

type Folder = {
  id:number,
  name:string,
  isFolder:boolean,
  children?:Folder[],
}

let path = ref<Folder[]>([])
let data = ref<Folder>({
  id:0,
  name:'0',
  isFolder:true,
  children:[]
})

defineExpose({
  data,
})

const emit = defineEmits(['on-click', 'on-mounted'])
const clickFolder = (folder:Folder) => {
  if (folder.isFolder) {
    emit('on-click', folder)
    if (data.value) {
      path.value.push(data.value)
    } else {
      console.log('a folder loss children')
    }
  }
}

const backup = () => {
  if (path.value.length > 1) {
    path.value.pop()
    data.value = path.value.at(path.value.length-1) as Folder
  }
}

const clickPath = (index:number) => {
  while (path.value.length > index + 1) {
    path.value.pop()
  }
  data.value = path.value.at(path.value.length-1) as Folder
}

onMounted(() => {
  emit('on-mounted')
  console.log(data)
  if (data.value) {
    path.value.push(data.value)
  } else {
    console.log('folder data is empty')
  }
})

</script>

<style scoped lang="less">

</style>