二.数据输入（输入框）

前言 --> 输入框组件特点

• 下拉菜单组件应该由两部分组成：

• 它的主要功能包括：

1.目录结构

├── button
│   ├── button-group.vue
│   ├── button.vue
│   └── index.js

2.组件封装

3.使用案例

<template>
    <div class="box">
        <vue-input v-model="searchName" placeholder="请输入名称搜索" @search="handleSearch" :suggest-data="suggestData" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
const searchName = ref('')
const suggestData = ref([])
const handleSearch = () => {
    alert(searchName)
    suggestData.push(searchName)
}
</script>
<style lang="scss" scoped>
.box{
    padding: 10px ;
    background: lightgray;
    display: inline-block;
}
</style>

总结

通过对前端组件的分析，需要重点关注组件中易变性对组件封装的影响，它会对组件的可复用性、可扩展性产生很大影响