vue多功能渲染函数h()的使用和多种应用场景

// 语法格式
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// 基本使用示例
h('div', { id: 'foo' }, 'Hello我是天天鸭!');

<template>
  <button @click="changeComponent">切换动态组件</button>
  <component :is="createComponent()" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const nowComponent = ref('ComponentA');

function changeComponent() {
  nowComponent.value = nowComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
}

const createComponent = () => {
  return h(nowComponent.value === 'ComponentA' ? ComponentA : ComponentB);
};
</script>

<template>
  <FunctionalComponent text="这是函数式组件" @click="handleClick" />
</template>

<script setup lang="ts">
import { h, defineEmits } from 'vue';

const FunctionalComponent = (props, context) => {
  return h('div', null, [
    h('p', null, props.text),
    h('button', { onClick: context.emit.bind(context, 'click') }, '点击我')
  ]);
};

const emit = defineEmits(['click']);

function handleClick() {
  console.log('handleClick');
}
</script>

<template>
  <button @click="myVisibility">切换组件显示状态</button>
  <component :is="componentWithProps()" />
</template>

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

  const visible = ref(true);

  function myVisibility() {
    visible.value = !visible.value;
  }

  const componentWithProps = () => {
    return h('div', { class: { visible: visible.value } }, '我是div');
  };
</script>

<template>
  <SlotComponent>
    <template #default>
      <p>我是插槽里面</p>
    </template>
  </SlotComponent>
</template>

<script setup lang="ts">
import { h } from 'vue';

const SlotComponent = (props, context) => {
  return h('div', null, [
    h('p', null, '插槽里面:'),
    context.slots.default && context.slots.default()
  ]);
};
</script>

<template>
  <button @click="changeTag">切换标签</button>
  <component :is="createElement()" />
</template>

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

const tag = ref('div');

function changeTag() {
  tag.value = tag.value === 'div' ? 'section' : 'div';
}

const createElement = () => {
  return h(tag.value, null, '动态标签');
};
</script>