利用Vue v-model實(shí)現(xiàn)一個(gè)自定義的表單組件

更新時(shí)間：2017年04月27日 08:38:11 作者：苦練內(nèi)功

本篇文章主要介紹了利用Vue v-model實(shí)現(xiàn)一個(gè)自定義的表單組件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

功能描述:

通過點(diǎn)擊按鈕,可以增減購(gòu)物數(shù)量

組件名稱是 CouterBtn

最終效果如下

我們使用 vue-cli搭建基本的開發(fā)環(huán)境,這也是最快的進(jìn)行 .vue組件開發(fā)的方式

對(duì)于入口組件 App.vue (可以暫時(shí)忽略其他細(xì)節(jié),我們的重點(diǎn)是如何寫組件)

App.vue

 <template>
 <div id="app">
 <h4>這是一個(gè)利用 v-model實(shí)現(xiàn)的自定義的表單組件</h4>
 <h6>CouterBtn組件的值 <i> {{ btnValue }} </i></h6>
 5. <counter-btn v-model="btnValue"></counter-btn>
 <form class="" action="/add" method="post">
  <!-- 真實(shí)情況請(qǐng)將 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>

下面我來(lái)對(duì) App.vue中的一些代碼進(jìn)行一些說(shuō)明,根據(jù)代碼行數(shù)來(lái)說(shuō)明

4 : 我們使用 {{ btnValue }}來(lái)獲取自定義組件 counter-btn的值, 這里僅僅是展示效果用

5: 我們使用了counter-btn ,自定義的組件

9: 我們將自定義組件的值,綁定到我們的表單組件 input中去, 在真實(shí)的情況下, 此 input的類型可能為 hidden類型

21: 由于我們需要在App.vue組件中使用我們自定義的組件 counter-btn,所以需要使用 components注冊(cè)組件, 這里還使用了 ES6的對(duì)象解構(gòu)

26: 我們使用CSS預(yù)處理器為stylus, 前提是你的 node_modules中要安裝此npm包和loader,vue-cli已經(jīng)幫我們處理好了stylus的編譯; 根據(jù)個(gè)人情況選擇

我們自己設(shè)計(jì)的組件通過 v-model,把組件內(nèi)部的值傳給了它所綁定的值

下面我們來(lái)看看我們的組件的實(shí)現(xiàn)

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>

我們可以看到組件的實(shí)現(xiàn)非常簡(jiǎn)單, 3個(gè)button搞定; 這里最關(guān)鍵的代碼是

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

通過觸發(fā) input事件和自定的數(shù)據(jù)來(lái)實(shí)現(xiàn)把數(shù)據(jù)暴露給 v-model綁定的屬性值

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家

您可能感興趣的文章: