如何在setup的h渲染函数中使用component标签来实现动态组件渲染

[yn36]

如:->

[liulinboyi]

This is the Docs, Hope this can help you.

<script>
import { ref, h, resolveComponent } from 'vue'
import Comp from './Comp.vue'
import Comp1 from './Comp1.vue'
export default {
  setup() {
    const random = ref(0)
    function change() {
      const r = Math.random()
      random.value = r
    }
    return () => h('div', 
                   [h('button', {onClick: change}, 'change'),
                    h('br'),
                    random.value > 0.5 ? h(Comp, null) : h(Comp1, null),
                    h('div', {}, random.value)
                   ]
                  )
  },
  components: {
    Comp,
    Comp1
  }
}
</script>

Playground

[yn36]

Not so, what if there are more than a hundred components? I mean can it be implemented like using the component dynamic component tag in the dom template；

不是这样，如果有一百多个组件呢？我意思是能不能像在dom模板那样使用component动态组件标签那样实现

[kuizuo]

这一百多个组件你肯定是需要先导入才能使用组件，然后你只需要把 <component :is="comp" /> 中的comp变量替换成对应的动态组件就行了

[liulinboyi]

The code with <component />

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'
</script>

<template>
<component :is='Comp' />
</template>

are compiler to

/* Analyzed bindings: {
  "ref": "setup-const",
  "Comp": "setup-const"
} */
import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock } from "vue"

import { ref } from 'vue'
import Comp from './Comp.vue'

const __sfc__ = {
  __name: 'App',
  setup(__props) {


return (_ctx, _cache) => {
  return (_openBlock(), _createBlock(_resolveDynamicComponent(Comp)))
}
}

}
__sfc__.__file = "App.vue"
export default __sfc__

Playground

[HenryC-3]

https://github.com/HenryC-3/vue3-tabs-demo/blob/ce8c8cebb6eadcddac7d9087d685a61a301dd1a0/src/components/TabComponent.vue#L1-L19

<template>
    <button v-for="tab in tabs" :key="tab" @click="currentTab = tab.component">
        {{ tab.name }}
    </button>
    <component :is="currentTab ? currentTab : defaultTab"></component>
</template>


<script setup>
import { markRaw, ref } from "vue";
import tabOne from "./TabOne.vue";
import tabTwo from "./TabTwo.vue";

const tabs = ref([
    { name: "Tab 1", component: markRaw(tabOne) },
    { name: "Tab 2", component: markRaw(tabTwo) },
]);
const currentTab = ref(null);
const defaultTab = tabOne;
</script>