Vue.js入门 0x8 组件（Component）（5）Demo——数字输入框

原创

于 2019-01-31 00:50:14 发布 · 430 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue组件实战 #Vue组件数字输入框 #数字输入框 #Vue Demo #Vue

本文介绍了如何使用Vue.js创建一个数字输入框组件，该组件限制输入为数字，并提供加减按钮。组件支持初始值、最大值和最小值设置，数值改变时会触发自定义事件通知父组件。文章强调了组件API设计的重要性，包括props、events和slots的规划。

数字输入框只能输入数字，而且有两个快捷按钮，可以直接减1或加 1 。除此之外，还可以设置初始值、最大值、最小值，在数值改变时，触发一个自定义事件来通知父组件。

首先，在写代码前一定要明确需求，然后规划好API。一个Vue组件的API只来自props、events和slots，确定好这3部分的命名、规则，剩下的逻辑即使第一版没有做好，后续也可以迭代完善。但是API如果没有设计好，后续再改对使用者成本就很大了。

index.html 入口页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数字输入框组件</title>
    </head>
    <body>
        <div id="app">
            <!--在父组件引入input-number,并给他一个默认值5，最大值10，最小值0-->
            <input-number v-model="value" :max="10" :min="0"></input-number>
            <!--value是个关键的绑定值故用了v-model这样既实现了双向绑定也让API看起来很合理。-->
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="input-number.js"></script>
        <script src="index.js"><

最低0.47元/天解锁文章