利用vue組件自定義v-model實現(xiàn)一個Tab組件方法示例

更新時間：2017年12月06日 10:58:54 作者：viewweiwu

這篇文章主要給大家介紹了關于利用vue組件自定義v-model實現(xiàn)一個Tab組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

最近在學習vue，今天看到自定義組件，糾結了一會會然后恍然大悟...官方教程寫得不是很詳細，所以我決定總結一下。下面話不多說了，來一起看看詳細的介紹吧。

效果

先讓我們看一下例子的效果吧！

v-model

我們知道 v-model 是 vue 里面的一個指令，vue的v-model是一個十分強大的指令,它可以自動讓原生表單組件的值自動和你選擇的值綁定，它可以用在 input 標簽上，來做數(shù)據(jù)的雙向綁定，就像這樣：

<input v-model="tab">

v-model 事實上是一個語法糖，你也可以這么寫：

<input :value="tab" :input="tab = $event.target.value">

可以看得出來，就是傳進去一個參數(shù) :value，監(jiān)聽一個事件 @input 而已。

如果有這樣的需求，需要在自己的組件上使用 v-model，就像這樣：

<Tab v-model="tab"></Tab>

如何來實現(xiàn)呢？

既然已經知道 v-model 是語法糖了，那么首先，我們可以知道在組件內得到的參數(shù)。

<!-- Tab.vue -->
<template>
 <div class="tab">
  <p>可以試著把這個值打印出來😀😀😀</p>
  {{value}}
 </div>
</template>


<script>
 export default {
  props: {
   // ↓這個就是我們能取到的參數(shù)
   value: {
    type: String,
    default: ''
   }
  }
 }
</script>

嗯，先把這個 value 先放著，如果要實現(xiàn)例子的那個 Tab，還需要傳進來一組選項(options)：

<!-- example.vue -->
<template>
 <div>
  <!-- 這里多了一個參數(shù) ↓ -->
  <Tab v-model="tab" :options="options"></Tab>
  <p class="info">{{tab}}</p>
 </div>
</template>

<script>
 import Tab from '~/Tab';

 export default {
  components: {
   Tab
  },
  data() {
   return {
    tab: 'bj',
    options: [{
     value: 'bj',
     text: '北京'
    }, {
     value: 'sh',
     text: '上海',
     disabled: true
    }, {
     value: 'gz',
     text: '廣州'
    }, {
     value: 'sz',
     text: '深圳'
    }]
   }
  }
 }
</script>

那我們就把傳進來的 options 循環(huán)出來吧!

<!-- Tab.vue -->
<template>
 <div class="tab">
  <div 
   class="item"
   v-for="(item, i) in options"
   :key="i">
   {{item.text}}
  </div>
 </div>
</template>

<script>
 export default {
  props: {
   value: {
    type: String
   },
   options: {
    type: Array,
    default: []
   }
  }
 }
</script>

傳進來的 options 缺少些參數(shù)，我們每個選項需要 active 來標記是否是選中狀態(tài)，需要 disabled 來標記是否是禁選狀態(tài)，所以拷貝一個 currOptions 來補全不足參數(shù)。

另外直接改變 value 這個 props 是沒有效果滴，所以拷貝一個 value 的副本，叫 currValue。

<!-- Tab.vue -->
<script>
 export default {
  props: {
   value: {
    type: String
   },
   options: {
    type: Array,
    default: []
   }
  },
  data() {
   return {
    // 拷貝一個 value
    currValue: this.value,
    currOptions: []
   }
  },
  mounted() {
   this.initOptions();
  },
  methods: {
   initOptions() {
    // 拷貝一個 options
    this.currOptions = this.options.map(item => {
     return {
      ...item,
      active: item.value === this.currValue,
      disabled: !!item.disabled
     }
    });
   }
  }
 }
</script>

🆗接下來再在選項上綁定擊事件就 OK 了。

既然知道父組件會接受 input 事件，那我們就只需要 this.$emit('input', this.currValue); 就好了。

<!-- Tab.vue -->
<template>
 <div class="tab">
  <div 
   class="item"
   v-for="(item, i) in options"
   :key="i"
   @click="onTabSelect(item)">
   <!-- ↑ 這里綁定了一個事件！ -->
   {{item.text}}
  </div>
 </div>
</template>

<script>
 export default {
  props: {
   value: {
    type: String
   },
   options: {
    type: Array,
    default: []
   }
  },
  data() {
   return {
    currValue: this.value,
    currOptions: []
   }
  },
  mounted() {
   this.initOptions();
  },
  methods: {
   initOptions() {
    this.currOptions = this.options.map(item => {
     return {
      ...item,
      active: item.value === this.currValue,
      disabled: !!item.disabled
     }
    });
   },
   // 添加選中事件
   onTabSelect(item) {
    if (item.disabled) return;
    this.currOptions.forEach(obj => obj.active = false);
    item.active = true;
    this.currValue = item.value;
    // 發(fā)布 input 事件，↓ 父組件如果有 v-model 就會監(jiān)聽到的。
    this.$emit('input', this.currValue);
   }
  }
 }
</script>

剩下的補上點樣式還有 watch 下 value 和 options 的變化就可以了，最后貼上完整代碼。

完整代碼

<!-- example.vue -->
<template>
 <div>
  <Tab v-model="tab" :options="options"></Tab>
  <p class="info">{{tab}}</p>
 </div>
</template>

<script>
 import Tab from '~/Tab';

 export default {
  components: {
   Tab
  },
  data() {
   return {
    tab: 'bj',
    options: [{
     value: 'bj',
     text: '北京'
    }, {
     value: 'sh',
     text: '上海',
     disabled: true
    }, {
     value: 'gz',
     text: '廣州'
    }, {
     value: 'sz',
     text: '深圳'
    }]
   }
  }
 }
</script>

<style lang="less" scoped>
 .info {
  margin-left: 50px;
  font-size: 30px;
 }
</style>

<!-- Tab.vue -->
<template>
 <div class="tab">
  <div 
   class="item"
   v-for="(item, i) in currOptions"
   :class="item | tabItemClass"
   :key="i"
   @click="onTabSelect(item)">
   {{item.text}}
  </div>
 </div>
</template>

<script>
 export default {
  props: {
   value: {
    type: String
   },
   options: {
    type: Array,
    default: []
   }
  },
  data() {
   return {
    currValue: this.value,
    currOptions: []
   }
  },
  mounted() {
   this.initOptions();
  },
  methods: {
   initOptions() {
    this.currOptions = this.options.map(item => {
     return {
      ...item,
      active: item.value === this.currValue,
      disabled: !!item.disabled
     }
    });
   },
   onTabSelect(item) {
    if (item.disabled) return;
    this.currOptions.forEach(obj => obj.active = false);
    item.active = true;
    this.currValue = item.value;
    this.$emit('input', this.currValue);
   }
  },
  filters: {
   tabItemClass(item) {
    let classList = [];
    if (item.active) classList.push('active');
    if (item.disabled) classList.push('disabled');
    return classList.join(' ');
   }
  },
  watch: {
   options(value) {
    this.initOptions();
   },
   value(value) {
    this.currValue = value;
   }
  }
 }
</script>

<style lang="less" scoped>
 .tab {
  @borderColor: #ddd;
  @radius: 5px;

  width: 100%;
  margin: 50px;
  overflow: hidden;
  position: relative;
  .item {
   padding: 10px 50px;
   border-top: 1px solid @borderColor;
   border-left: 1px solid @borderColor;
   border-bottom: 1px solid @borderColor;
   font-size: 30px;
   background-color: #fff;
   float: left;
   user-select: none;
   cursor: pointer;
   transition: 300ms;
   &:first-child {
    border-top-left-radius: @radius;
    border-bottom-left-radius: @radius;
   }
   &:last-child {
    border-right: 1px solid @borderColor;
    border-top-right-radius: @radius;
    border-bottom-right-radius: @radius;
   }
   &.active {
    color: #fff;
    background-color: red;
   }
   &:hover {
    color: #fff;
    background-color: #f06;
   }
   &.disabled {
    color: #fff;
    background-color: pink;
    cursor: no-drop;
   }
  }
 }
</style>

最后送上官網的鏈接→ 傳送門

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

vue中echarts圖表大小適應窗口大小且不需要刷新案例
這篇文章主要介紹了vue中echarts圖表大小適應窗口大小且不需要刷新案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue中如何獲取本地IP地址
這篇文章主要介紹了vue中如何獲取本地IP地址，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
在Vue中實現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應用于各種場合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫和組件來實現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實現(xiàn)二維碼的生成和掃描的方法
2023-06-06
詳細分析vue表單數(shù)據(jù)的綁定
這篇文章主要介紹了vue表單數(shù)據(jù)的綁定的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
vue-router項目實戰(zhàn)總結篇
vue-router 是 Vue.js 官方的路由庫.這篇文章主要介紹了vue-router項目實戰(zhàn)總結,需要的朋友可以參考下
2018-02-02
VUE+Canvas實現(xiàn)簡單五子棋游戲的全過程
這篇文章主要給大家介紹了關于VUE+Canvas實現(xiàn)簡單五子棋游戲的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-05-05
Vue渲染過程淺析
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
Vue extends 屬性的用法示例詳解
這篇文章主要為大家介紹了Vue extends 屬性的用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue關于訪問外鏈失敗的問題
這篇文章主要介紹了Vue關于訪問外鏈失敗的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue+webpack中配置ESLint
這篇文章主要介紹了vue+webpack中配置ESLint，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11