Vue 组件开发 - 数据输入框组件

墨蓝 2022-12-24 07:58 155阅读 0赞

### 目录 ###

*  设计通用组件的一般思路
 *  组件效果
 *  1. HTML结构
 *  2. index.js
 *  3. input-number.js
 *   *  3.1 input-number.js代码注解

--------------------

# 设计通用组件的一般思路 #

1.  明确需求；
2.  设计API（组件的API：只来自props、events 和 slots）；
    
    2.1 确定命名、规则  
    2.2 编写业务逻辑
    
    > 即使逻辑的第一版没做好，后续还可迭代完善；但如果 API 没设计好，后续修改成本很高。

--------------------

# 组件效果 #

![在这里插入图片描述][20201127144347620.png]

# 1. HTML结构 #

由于本示例以交互功能为主，CSS美化样式简单处：

基本结构代码，初始化项目如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>输入框组件</title>
        <style> #app { width: 260px; height: 80px; line-height: 80px; margin: 100px auto; border: 1px solid #a5a5a5; } .input-number input { width: 70px; margin-left: 50px; text-align: center; } .input-number button { width: 24px; text-align: center; } </style>
    </head>
    
    <body>
        <div id="app">
        
       		
            <input-number v-model="value" :max="10" :min="1"></input-number>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="input-number.js"></script>
        <script src="./index.js"></script>
    </body>
    </html>

**注：** **value** 是一个关键的绑定值， 所以用了`v-model` ，这样既优雅地实现了 **双向绑定**，也让`API` 看起来很合理。大多数的表单类组件都应该有一个`v-model` ， 比如 **输入框**、**单选框**、**多选框**、**下拉选择器**等。

# 2. index.js #

var app = new Vue({ 
        el: '#app',
        data: { 
            value: 1
        }
    })

--------------------

# 3. input-number.js #

**完整代码**：

## 3.1 input-number.js代码注解 ##

组件配置都在这里面定义。先在`template`里定义了组件的根节点，因为是独立组件，所以应该对每个prop 进行校验。这里根据需求有最大值、最小值、默认值（也就是绑定值） 3 个 prop，`max` 和 `min` 都是数字类型，默认值是正无限大和负无限大； value 也是数字类型，默认值是 1 。

Vue 组件是单向数据流，所以无法从组件内部直接修改`prop value` 的值。

**解决办法：** 给组件声明一个`data`，默认引用`value`的值，然后在组件内部维护这个`data`。

但是，这样只解决了初始化时引用父组件`value` 的问题， 如果从父组件修改了`value` , `input-number`组件的`currentValue`也要一起更新。

为了实现这个功能， 需要用到监听（`watch`）。watch 选项用来监听某个`prop` 或`data`的改变， 当它们发生变化时，就会触发`watch` 配置的函数，从而业务逻辑。

这里需要监听两个量： `value` 和`currentValue`. 监听value 是要知晓从父组件修改了value，监听`currentValue`是当`currentValue`改变时，更新`value` 。

[20201127144347620.png]: /images/20221120/af826cf32ba04b35845a533692506a79.png