vue3 使用component is 动态组件

使用方式

父组件

<template>
  <div class="box">
    <div>
      <!-- setup需要用变量的方式来写入is，如果是options api方式可以用组件字符 -->
       <!-- myProps 属性可以直接传到动态组件 -->
      <component :is="childT" myProps="sldfjsklfjksfjsfj"/>
    </div>
  </div>
</template>
<script lang="ts" setup>

import childT from "./components/childT.vue";


</script>
<style lang="stylus" scoped></style>

子组件:childT.vue

<template>
  <div class='box'>
    childT
  </div>
</template>
<script lang='ts' setup>
// import { ref, reactive, computed, onMounted, nextTick } from 'vue';


const props = defineProps<{
  myProps: string,
}>();

console.log(props.myProps,"ldsnvlsdjfskdjfsfdj");
</script>
<style lang='scss' scoped></style>

tsx如何component is

参考：

import { defineComponent } from 'vue';
import ChildT from './components/ChildT';
import { h } from 'vue';

const App = defineComponent({
  setup() {
    return () => (
      <div class="box">
        <div>
          {h(ChildT, { myProps: "sldfjsklfjksfjsfj" })}
        </div>
      </div>
    );
  }
});

export default App;

也就是使用h函数，动态渲染组件