本文介绍了如何使用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"&g
最低0.47元/天 解锁文章
3096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
