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

 <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>

 <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>