动态组件、递归组件与函数式组件

<script setup lang="ts">
import { ref, shallowRef, type Component } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'

const tabs = { A: ComponentA, B: ComponentB, C: ComponentC }
// 注意类型：存"组件对象"用 shallowRef，别用 ref 深度代理组件定义
const current = shallowRef<Component>(tabs.A)
const message = ref('来自父组件的消息')
</script>

<template>
  <button v-for="(comp, name) in tabs" :key="name" @click="current = comp">
    组件 {{ name }}
  </button>

  <!-- 传 props 与监听事件与静态组件完全同形 -->
  <keep-alive>
    <component :is="current" :message="message" @update="m => (message = m)" />
  </keep-alive>
</template>

<!-- TreeNode.vue：组件在自己的模板里引用自己（以文件名） -->
<script setup lang="ts">
import { ref } from 'vue'

interface TreeNode {
  id: number
  name: string
  children?: TreeNode[]
}

defineProps<{ node: TreeNode }>()
const expanded = ref(false)
</script>

<template>
  <div class="tree-node">
    <div class="node-content" @click="expanded = !expanded">
      {{ node.name }}
      <span v-if="node.children?.length">{{ expanded ? '▼' : '→' }}</span>
    </div>
    <div v-if="expanded && node.children?.length" class="node-children">
      <!-- 递归点：渲染子节点 = 渲染自己 -->
      <TreeNode v-for="child in node.children" :key="child.id" :node="child" />
    </div>
  </div>
</template>

// Badge.ts —— 整个组件就是一个函数
import { h, type FunctionalComponent } from 'vue'

interface Props { text: string; type?: 'ok' | 'warn' | 'err' }

const Badge: FunctionalComponent<Props, { click: MouseEvent }> = (props, { slots, emit }) =>
  h(
    'span',
    {
      class: ['badge', props.type ?? 'ok'],
      onClick: (e: MouseEvent) => emit('click', e),
    },
    slots.default?.() ?? props.text,   // 插槽优先，props 兜底
  )
Badge.props = ['text', 'type']         // 函数式组件需手动声明 props
Badge.emits = ['click']

export default Badge

<script setup lang="ts">
import Badge from './Badge'
</script>
<template>
  <Badge text="新" type="warn" @click="onClick">角标文字</Badge>
</template>

<!-- 结构复用：包裹组件（对比 React 的 HOC 思路） -->
<script setup lang="ts">
import { h, defineComponent, type Component } from 'vue'

// withLoading：给任意组件包一层加载态（高阶组件模式）
export function withLoading(Wrapped: Component) {
  return defineComponent({
    name: 'WithLoading',
    props: ['loading'],
    setup(props, { attrs, slots }) {
      return () =>
        props.loading
          ? h('div', { class: 'loading' }, '加载中...')
          : h(Wrapped, attrs, slots)      // attrs 已含父组件传入的全部 props 与事件（Vue 3 里事件也在 attrs）
    },
  })
}
</script>

// 使用：得到一个带加载态的新组件
const AsyncUserCard = withLoading(UserCard)
// <AsyncUserCard :loading="pending" :user="user" @refresh="reload" />

<!-- ErrorBoundary.vue -->
<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue'

const hasError = ref(false)
const error = ref<Error | null>(null)

onErrorCaptured((err) => {
  hasError.value = true
  error.value = err as Error
  return false          // 返回 false 阻止错误继续向上传播
})

function reset() {
  hasError.value = false
  error.value = null
}
</script>

<template>
  <slot v-if="!hasError" />
  <div v-else class="error-box">
    <h3>这块内容出了问题</h3>
    <p>{{ error?.message }}</p>
    <button @click="reset">重试</button>
  </div>
</template>

<!-- 使用：易出错的第三方挂件单独圈起来 -->
<ErrorBoundary>
  <ThirdPartyWidget />
</ErrorBoundary>