美文网首页WEB让前端飞Web前端之路
如何写一个双向绑定的VUE组件

如何写一个双向绑定的VUE组件

作者: 文青程序猿 | 来源:发表于2018-04-29 14:08 被阅读219次

    最近在重构公司项目代码,因为之前这一块不是我写的,所以也抽空看了一下之前同事的代码,可能是因为大家都是初学VUE,现在看来,有些代码还是略显稚嫩的,有一个小组件,虽然很简单,但是还是可以拿出来说一下的,因为它是一个双向绑定组件.

    v-model是什么

    教程上说的很清楚,v-model是一个语法糖,它是由 :value@input构成的[1]

    为什么我需要v-model

    使用v-model不仅仅是因为它简单,它的意义一方面是简化了书写,二是简化了逻辑,三是更加语义化,四是让API更加友好,简单易懂.
    在VUE2.5之后,.sync修饰符又重新回归了,我们可以通过.sync修饰符来处理双向绑定问题,但是我觉得两者的使用场景是不一样的,v-model更多的是接收用户输入,而.sync更多的是同步数据.

    怎么样实现一个可以使用v-model的组件

    其实这个问题也很简单,只要仔细思考了上面两个问题,应该可以知道如何写,下面我就拿项目中的这个例子来做一个介绍,这个组件的效果是这样的,一个简单的switch开关:

    QQ20180429-133843-HD.gif-66.8kBQQ20180429-133843-HD.gif-66.8kB

    改造之前的代码:

    <template>
        <div class="switch-outer"
             :class="{'on':on,'off':!on}"
             @click="handleChange">
            <span class="text"
                  v-show="on">{{onText}}</span>
            <span class="text"
                  v-show="!on">{{offText}}</span>
            <span class="active-ball"></span>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
                on: this.isOn
            };
        },
        props: {
            onText: {
                type: String,
                default: '开启'
            },
            offText: {
                type: String,
                default: '关闭'
            },
            isOn: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            handleChange() {
                this.on = !this.on;
                this.$emit('change', this.on);
            }
        },
        watch: {
            isOn() {
                this.on = this.isOn;
            }
        }
    };
    </script>
    <style rel="stylesheet/scss" lang="scss" scoped>
    .switch-outer {
        position: absolute;
        cursor: pointer;
        color: #ffffff;
    
        .active-ball {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: currentColor;
            position: absolute;
            top: 1px;
        }
    }
    
    .on {
        background: #00a4ee;
    
        .active-ball {
            left: 53px;
            transition: all 0.5s ease;
        }
    
        .text {
            margin-left: 14px;
            font-size: 14px;
        }
    }
    
    .off {
        background: #c0ccda;
    
        .active-ball {
            left: 2px;
            transition: all 0.5s ease;
        }
    
        .text {
            margin-left: 44px;
            font-size: 14px;
        }
    }
    </style>
    

    改造之前的代码,并不能使用v-model来做双向绑定,但是很显然,这是一个switch开关,是一个用户输入组件,所以使用v-model是很自然的需求,但是目前这个组件的使用方式是这样的

     <sky-switch class="share-switch"
                @change="handleChange"
                :isOn="group.is_files_share"
                ref="shareSwitch"></sky-switch>
    
    // 手动监听change事件,修改数据
    handleChange(on) {
        this.group.is_files_share = on;
    }
    

    我们需要自己监听change事件,手动的修改值,这显然不符合我们对用户输入组件的认知,我们需要一个像<input>那样的组件,通过 v-model 来绑定数据,剩下的交给vue来帮助我们处理.

    显然这种使用方式并不友好,不能称为一个合格的组件.如果没有文档,我需要看源码才能知道这个组件如何使用,如果源码写的十分复杂,这个组件基本上是不可复用的.

    接下来我们就开始魔改这个组件代码,删除不必要的监听和属性,简单直接的利用v-model来实现这个功能

    改造后的代码

    <template>
        <div class="switch-outer"
             :class="{'on':on,'off':!on}"
             @click="handleChange">
            <span class="text"
                  v-show="on">{{onText}}</span>
            <span class="text"
                  v-show="!on">{{offText}}</span>
            <span class="active-ball"></span>
        </div>
    </template>
    <script>
    export default {
        props: {
            onText: {
                type: String,
                default: '开启'
            },
            offText: {
                type: String,
                default: '关闭'
            },
            value: {  // 将 isOn改成 value ,用来接收 v-model 的传值
                type: Boolean,
                default: true
            }
        },
        methods: {
            handleChange() {
                this.on = !this.on;  // 通过赋值操作来触发属性 on 的 set 方法
                this.$emit('change', this.on); // 发送 change 事件,作为一个事件钩子,方便用户处理自己的逻辑
            }
        },
        computed: {
            on: {  // 去掉了data里面的on,使用计算属性
                get() {  // get时返回 value值
                    return this.value; 
                },
                set(val) { // set时发送 input 事件
                    this.$emit('input', val);
                }
            }
        }
    };
    </script>
    <style rel="stylesheet/scss" lang="scss" scoped>
    .switch-outer {
        position: absolute;
        cursor: pointer;
        color: #ffffff;
        .active-ball {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: currentColor;
            position: absolute;
            top: 1px;
            transition: all 0.5s ease;
        }
        transition: all 0.5s ease;
    }
    
    .on {
        background: #00a4ee;
        .active-ball {
            left: 53px;
            transition: all 0.5s ease;
        }
        .text {
            margin-left: 14px;
            font-size: 14px;
            transition: all 0.5s ease;
        }
    }
    
    .off {
        background: #c0ccda;
        .active-ball {
            left: 2px;
        }
        .text {
            margin-left: 44px;
            font-size: 14px;
            transition: all 0.5s ease;
        }
    }
    </style>
    

    这段代码的核心是那个计算属性on,巧妙的通过计算属性的getset方法,实现监听数据变化,get时返回通过props传入的value,set时,向父组件发送input事件,这样就可以配合v-model来使用了,因为v-model的本质就是向组件传一个valueprop,并且监听input方法[2]

    style部分做了微调,因为这里加入了动画,但是原来的动画只有部分值是动的,会显得很突兀,所以调整为所有变化的属性都有动画,这样整个动画变得很平滑.

    改造后的组件,使用方式是这样的:

    <sky-switch class="share-switch" v-model="group.share_file"></sky-switch>
    

    简单明了,一看就是一个用户输入组件,和<input>元素一样.

    当然,这个组件还不够完善,API接口也没有很好的设计,但是用来说明v-model这个问题应该是足够了.

    写在最后

    没事多重构自己的点,也可以重构别人的代码,看看别人是怎么实现的,自己又能怎么实现,相互对比,学习,这样才能快速进步.
    前两天有事情,清了一天假,项目进度有点落后,今天过来补点进度,剩下点时间,写了这篇文字,虽然是一个很小的点,但是,希望能对对个别人有所启发.


    1. 这里只是简单的说,其实由什么属性和事件组成,可以通过一个model参数来定制

    2. 这里依然是从简单的角度来说.

    相关文章

      网友评论

      本文标题:如何写一个双向绑定的VUE组件

      本文链接:https://www.haomeiwen.com/subject/feiolftx.html