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

功能描述:

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

组件名称是 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悬浮表单复合组件开发详解 # 自定义 # 绑定 # 表单 # 使用了 # 好了 # 我来 # 这是一个 # 可以看到 # 来看看 # 仅仅是 # 中去 # 请将 # 能为 # 来实现 # 最关键 # 中要 # 自定 # 真实情况 # 行数 # 情况下

返回目录在线咨询

上一篇：济南个人建站常见误区：新手容易犯的错误及避免方法？
下一篇：如何通过建站市场备案服务号查询备案进度？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求