利用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 form30. margin-top 20px padding 20px border 1px dotted #ccc label  vertical-align: middle35. </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 030. outline 0 border-radius 3px button:nth-child(2) width 200px  </style>