如何封装组件

┌──────────────────────────────┐
│         封装的组件             │
│                              │
│   Props（输入）→  ┌──────┐    │
│                  │ 内部  │    │
│                  │ 实现  │ → Events（输出）│
│   Slots（插槽）→  │ 细节  │    │
│                  └──────┘    │
│       （样式、状态、逻辑）    │
└──────────────────────────────┘

<script setup>
// ✅ 好的 Props 设计：语义化、类型明确、有默认值
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: ''
  },
  size: {
    type: String,
    validator: (v) => ['small', 'medium', 'large'].includes(v),
    default: 'medium'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>

// ❌ 不好：多个离散参数，调用方难以记忆
<UserCard
  name="张三"
  age="25"
  avatar="/img.jpg"
  email="..."
  phone="..."
/>

// ✅ 好：关联数据放在一起
<UserCard :user="userData" />

// 或者用 config 对象分组
<DataTable
  :columns="tableColumns"
  :data="tableData"
  :pagination="{
    page: 1,
    pageSize: 20,
    total: 100
  }"
/>

// ✅ 推荐：语义化的布尔 prop
<Button loading />
<Button disabled />
<Button readonly />

// ❌ 避免：含义模糊的字符串枚举
<Button status="loading" />
<Button state="disabled" />

<Button loading />          <!-- loading = true -->
<Button :loading="true" />  <!-- 同上 -->
<Button :loading="false" /> <!-- loading = false -->

// ❌ 错误：直接修改 prop
const props = defineProps(['count'])
props.count++  // 警告！

// ✅ 正确：通过事件通知父组件修改
const emit = defineEmits(['update:count'])
function handleClick() {
  emit('update:count', props.count + 1)
}

<!-- 父组件 -->
<Counter v-model:count="pageCount" />

<!-- 子组件 -->
<script setup>
const props = defineProps(['count'])
const emit = defineEmits(['update:count'])
</script>

<!-- SearchInput.vue -->
<script setup>
const emit = defineEmits(['search', 'clear', 'focus'])

function handleSearch(value) {
  emit('search', value)
}

function handleClear() {
  emit('clear')
}
</script>

<template>
  <div class="search-input">
    <input @input="handleSearch($event.target.value)" />
    <button @click="handleClear">清除</button>
  </div>
</template>

// ✅ 推荐：kebab-case 事件名（HTML 原生风格）
emit('update:model-value')
emit('item-selected')
emit('before-close')

// ❌ 避免：camelCase（在模板中不直观）
emit('updateModelValue')
emit('itemSelected')
emit('beforeClose')

<!-- FormInput.vue -->
<script setup>
import { ref } from 'vue'

const inputRef = ref(null)

function focus() {
  inputRef.value?.focus()
}

function validate() {
  // 校验逻辑...
  return true
}

// 暴露给父组件
defineExpose({ focus, validate })
</script>

<!-- 父组件调用 -->
<script setup>
const formRef = ref(null)
formRef.value?.focus()
formRef.value?.validate()
</script>

<style scoped>
/* 只影响当前组件，不影响子组件 */
.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 深度选择器：穿透到子组件 */
:deep(.table-cell) {
  padding: 12px;
}

/* 插槽内容样式 */
:slotted(.custom-header) {
  font-weight: bold;
}
</style>

/* Button.module.css */
.button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.primary {
  background: #1890ff;
  color: #fff;
}

.danger {
  background: #ff4d4f;
  color: #fff;
}

// React 中使用
import styles from './Button.module.css'

function Button({ variant = 'primary', children }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
    >
      {children}
    </button>
  )
}

// styled-components 示例
import styled from 'styled-components'

const StyledButton = styled.button<{ $variant: 'primary' | 'danger' }>`
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: ${props => props.$variant === 'danger' ? '#ff4d4f' : '#1890ff'};
  color: white;

  &:hover {
    opacity: 0.9;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`

<!-- 复合组件：Select + Option -->
<Select v-model="selected">
  <SelectOption value="1">选项一</SelectOption>
  <SelectOption value="2">选项二</SelectOption>
  <SelectOption value="3">选项三</SelectOption>
</Select>

<!-- 实现思路 -->
<script setup>
// Select.vue
import { provide, ref } from 'vue'

const selected = defineModel()
provide('selectValue', selected)

// SelectOption.vue
import { inject } from 'vue'
const selectValue = inject('selectValue')
const isSelected = computed(() => selectValue.value === props.value)
</script>

// 高阶组件：给组件添加通用能力
function withLoading<T>(WrappedComponent: React.ComponentType<T>) {
  return function WithLoadingComponent(props: T & { loading?: boolean }) {
    if (props.loading) {
      return <div className="loading-spinner">加载中...</div>
    }
    return <WrappedComponent {...props} />
  }
}

// 使用
const UserListWithLoading = withLoading(UserList)
<UserListWithLoading loading={isLoading} users={users} />

// Vue 组件测试示例
import { mount } from '@vue/test-utils'
import Button from './Button.vue'

describe('Button', () => {
  it('渲染默认状态', () => {
    const wrapper = mount(Button, {
      props: { label: '提交' }
    })
    expect(wrapper.text()).toContain('提交')
  })

  it('禁用状态下触发点击', async () => {
    const wrapper = mount(Button, {
      props: { label: '提交', disabled: true }
    })
    await wrapper.trigger('click')
    expect(wrapper.emitted('click')).toBeFalsy()
  })

  it('loading 状态显示加载图标', () => {
    const wrapper = mount(Button, {
      props: { label: '保存', loading: true }
    })
    expect(wrapper.find('.loading-icon').exists()).toBe(true)
  })
})