封装自定义组件使用v-model的方法：

75 阅读 0 评论 50 点赞

我是靠谱客的博主快乐石头，最近开发中收集的这篇文章主要介绍封装自定义组件使用v-model的方法：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

以前对封装自定义组件使用v-model时理解不深，甚至有些错误理解。导致每次写v-model时非常麻烦，不愿意使用。

今天再次用到时，查了相关资料，终于理解了如何最直接的使用v-model以及model。
举个例子：
需要封装一个tab组件，并且使用v-model来获取当前tab栏的值。
那么父组件调用的代码则期望是这样的：

<MerchantBusinessTab v-model="activeValue" :tabList="tabList" ></MerchantBusinessTab>

而v-model是绑定参数和绑定事件的语法糖，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为input 的事件，因此v-model一般情况下是：
:value=“someValue” @input=“val=>someValue=val”
此语句的缩写。

所以我们也可以把父组件改为：

<MerchantBusinessTab :value="activeValue" @input="val => activeValue=val" :tabList="tabList" ></MerchantBusinessTab>

为什么说是一般情况下呢，因为我们也可以改写默认绑定的prop名称和event名称，利用下面的model

接下来重点是子组件的写法：

<!-- 选业务的tab栏 -->
<template>
  <div class="tab">
    <div class="item" v-for="(item, i) of tabList" :key="i" :class="{ active: currentIndex == i }" @click="selectedTab(i)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'MerchantBusinessTab',
  model: {
    prop: 'value',
    event: 'onTabChange'
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    tabList: {
      type: Array,
      default () {
        return [
          { label: '流量', value: 1 },
          { label: '终端', value: 2 },
          { label: '权益', value: 3 }
        ]
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    currentIndex () {
      return this.tabList.findIndex(item => item.value == this.value)
    }
  },
  // 方法集合
  methods: {
    selectedTab (i) {
      this.$emit('onTabChange', this.tabList[i].value)
    }
  }
}
</script>