先聊聊为什么要封装组件

说实话，写项目的时候经常会遇到同样的按钮、输入框。

每次dou手动改属性，那叫一个累啊。

哈哈，这时候我们就想：干脆把它们抽出来变成可复用的组件呗。

可是你真的知道怎么封装才Neng又快又稳吗？

别急，咱们慢慢来一步一步拆开来讲。

先想清楚，这个组件到底要干嘛。

比如说我们要一个按钮，既Neng支持 v-model，又Neng透传所有属性。

别忘了还得兼容 Element Plus、Ant Design 那些 UI 库的风格。

这个目标一旦定好，后面的代码就不会跑偏了。

记住一个组件Zui好只有一个根元素。

不然属性透传就会乱套，你懂的。

v-model 本质上是把 modelValue 当作 prop，把 update:modelValue 当作 emit。

// script setup
const props = defineProps({
    modelValue: {
        type: ,
        default: ''
    }
})
const emit = defineEmits
function handleInput {
    emit
}

不对不对，我刚才写成了 default，应该是 default 才对。

$attrs Neng帮我们把父组件没声明的属性全扔进去。

这样父组件写 `` 就会自动映射到内部的 el-button 上。

有时候你想让父组件直接调子组件的 focus、reset 之类的方法。

// my-input.vue
import { ref } from 'vue'
const inputRef = ref
function focus {
    inputRef.value?.focus
}
defineExpose

父组件只需要 `` 然后 `myInput.focus` 就搞定啦。

默认插槽Ke以让调用方自定义按钮文字或图标。

    
    {{ label }}

这样一来无论是表单还是搜索框，douNeng直接用 `` 了。

A/B 测试时我把原来的散落代码全部换成上面的通用组件。

页面渲染时间从 1.4 秒降到 0.9 秒左右。

?害，这可比我预期的还好呢！

#1 属性冲突：

Ru果子组件自己声明了同名 prop，$attrs 就不会再往下传递。记得检查一下命名是否重复呀。

#2 插槽默认内容被覆盖：

别忘了给插槽加上 fallback 内容，不然父组件不传东西时会空白。比如 `{{ placeholder }}` 。

#3 响应式陷阱：

props 的默认值Ru果是对象，要用函数返回，否则所有实例会共用同一个对象。真是个细节坑啊！不对不对，是要用 `default: => ` 才行。

- 用语义化标签，比如 `` 包裹每块内容；`` 放整体文章；`` 写标题等；这有助于爬虫理解结构。

- 在关键字出现的位置加粗 ``，提升关键词密度但不要堆砌。