利用Vue v-model实现一个自定义的表单组件_网络技术

利用Vue v-model实现一个自定义的表单组件

发布时间 - 2026-01-11 00:51:23 点击率：次

功能描述:

通过点击按钮,可以增减购物数量

组件名称是 CouterBtn

最终效果如下

我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式

对于入口组件 App.vue (可以暂时忽略其他细节,我们的重点是如何写组件)

App.vue

 <template>
 <div id="app">
 <h4>这是一个利用 v-model实现的自定义的表单组件</h4>
 <h6>CouterBtn组件的值 <i> {{ btnValue }} </i></h6>
 5. <counter-btn v-model="btnValue"></counter-btn>
 <form class="" action="/add" method="post">
  <!-- 真实情况请将 type改为hidden -->
  <label for="count">值绑定到 input 隐藏域里</label>
  <input type="text" name="count" :value="btnValue.res" id="count">
10. </form>
 </div>
 </template>
 <script>
 import CounterBtn from './components/CouterBtn.vue'
15. export default {
 data() {
  return {
  btnValue: {}
  }
20. },
 components: {
  CounterBtn
 }
 }
25. </script>
 <style lang="stylus">
 h6 i
 border 1px dotted
 form
30. margin-top 20px
 padding 20px
 border 1px dotted #ccc
 label
  vertical-align: middle
35. </style>

下面我来对 App.vue中的一些代码进行一些说明,根据代码行数来说明

4 : 我们使用 {{ btnValue }}来获取自定义组件 counter-btn的值, 这里仅仅是展示效果用

5: 我们使用了counter-btn ,自定义的组件

9: 我们将自定义组件的值,绑定到我们的表单组件 input中去, 在真实的情况下, 此 input的类型可能为 hidden类型

21: 由于我们需要在App.vue组件中使用我们自定义的组件 counter-btn,所以需要使用 components注册组件, 这里还使用了 ES6的对象解构

26: 我们使用CSS预处理器为stylus, 前提是你的 node_modules中要安装此npm包和loader,vue-cli已经帮我们处理好了stylus的编译; 根据个人情况选择

我们自己设计的组件通过 v-model,把组件内部的值传给了它所绑定的值

下面我们来看看我们的组件的实现

CounterBtn.vue

 <template>
 <div class="coutter-wrapper">
 <button type="button" @click="plus">+</button>
 <button type="button">{{ result }}</button>
5. <button type="button" @click="minus">-</button>
 </div>
 </template>
 <script>
 export default {
10. methods: {
 minus() {
 this.result--;
 this.$emit('input', {res: this.result, other: '--'})
 },
15. plus() {
 this.result++;
 this.$emit('input', {res: this.result, other: '++'})
 }
 },
20. data() {
 return {
 result: 0,
 }
 }
25. }
 </script>
 <style lang="stylus" scoped>
 button
 border 0
30. outline 0
 border-radius 3px
 button:nth-child(2)
 width 200px 
 </style>

我们可以看到组件的实现非常简单, 3个button搞定; 这里最关键的代码是

this.$emit('input', {res: this.result, other: '++'})

通过触发 input事件和自定的数据来实现把数据暴露给 v-model绑定的属性值

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持

# vue # 表单验证组件 # 表单组件 # 组件 # v-model # vue使用Element组件时v-for循环里的表单项验证方法 # Vue2.0表单校验组件vee-validate的使用详解 # vue组件表单数据回显验证及提交的实例代码 # Vue表单类的父子组件数据传递示例 # 详解vue表单验证组件 v-verify-plugin # Vue form表单动态添加组件实战案例 # vue动态绑定组件子父组件多表单验证功能的实现代码 # 使用form-create动态生成vue自定义组件和嵌套表单组件 # vue2.0数据双向绑定与表单bootstrap+vue组件 # vue悬浮表单复合组件开发详解 # 自定义 # 绑定 # 表单 # 使用了 # 好了 # 我来 # 这是一个 # 可以看到 # 来看看 # 仅仅是 # 中去 # 请将 # 能为 # 来实现 # 最关键 # 中要 # 自定 # 真实情况 # 行数 # 情况下

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：音乐编曲秘籍：打造引人入胜的歌曲结构与形式

下一篇：注册域名后建站遇到问题：常见错误排查与解决方法汇总

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：音乐编曲秘籍：打造引人入胜的歌曲结构与形式

下一篇：注册域名后建站遇到问题：常见错误排查与解决方法汇总