如何使用vue组件自定义v-model实现一个Tab组件

这篇文章主要介绍如何使用vue组件自定义v-model实现一个Tab组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务双台子,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

效果

先让我们看一下例子的效果吧！

v-model

我们知道 v-model 是 vue 里面的一个指令，vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定，它可以用在 input 标签上，来做数据的双向绑定，就像这样：

v-model 事实上是一个语法糖，你也可以这么写：

可以看得出来，就是传进去一个参数 :value，监听一个事件 @input 而已。

如果有这样的需求，需要在自己的组件上使用 v-model，就像这样：

如何来实现呢？

既然已经知道 v-model 是语法糖了，那么首先，我们可以知道在组件内得到的参数。

嗯，先把这个 value 先放着，如果要实现例子的那个 Tab，还需要传进来一组选项(options)：

那我们就把传进来的 options 循环出来吧!

传进来的 options 缺少些参数，我们每个选项需要 active 来标记是否是选中状态，需要 disabled 来标记是否是禁选状态，所以拷贝一个 currOptions 来补全不足参数。

另外直接改变 value 这个 props 是没有效果滴，所以拷贝一个 value 的副本，叫 currValue。

?接下来再在选项上绑定击事件就 OK 了。

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

剩下的补上点样式还有 watch 下 value 和 options 的变化就可以了，最后贴上完整代码。

完整代码

 .info {
  margin-left: 50px;
  font-size: 30px;
 }

 .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;
   }
  }
 }

以上是“如何使用vue组件自定义v-model实现一个Tab组件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

当前名称：如何使用vue组件自定义v-model实现一个Tab组件
文章出自：http://bjjierui.cn/article/jsgihs.html