Vue在组件(非表单控件)上使用v-model双向数据绑定

先看一下效果，注意：完全没有使用任何表单控件

GIF.gif

实现原理

1. 在Vue中，我们一般都使用v-model来实现表单控件的双向数据绑定，但是一般而言我们都使用在表单控件上，例如input，textarea；但是如果我们现在一般都不使用原生的表单样式，因为它实在是太太太丑了

2. 其实我们是可以给组件设置v-model属性的，此时，不论你的组件内部是不是一个表单元素，你都可以使用v-model这个属性

3. v-model其实是一个value + input 以及 checked || selected + change的语法糖，它在内部做了一些事情，当你给元素绑定v-model的时候，v-model会监听元素的input事件，并且给元素设置一个value值

4. 那么我们就可以通过这个特性，来达到给组件使用v-model的方法

如文章开头的gif图所示，我制作的是一个单选按钮组件，并没有使用input，所以按正常情况下我是不能直接使用v-model来控制这个组件的

父组件内代码示例，需要注意的是： @change并不是必须的，只是为了触发某一个事件而定义的，你也可以使用watch监听对应的值发生变化的时候做一些事情

<template>
    <div class="home" align="center">
        <my-radio label="a" v-model="check" @change="checkChange"/>
        <my-radio label="b" v-model="check" @change="checkChange"/>
        <my-radio label="c" v-model="check" @change="checkChange"/>
        <b>当前选中的是{{check}}</b>
        <p></p>
        <my-radio label="1" v-model="num" @change="checkChange"/>
        <my-radio label="2" v-model="num" @change="checkChange"/>
        <my-radio label="3" v-model="num" @change="checkChange"/>
        <b>当前选中的是{{num}}</b>
    </div>
</template>

<script>
    import myRadio from '../components/Home/myRadio';
    export default {
        name: 'home',
        data() {
            return {
                check: 'a',
                num: '1'
            }
        },
        methods: {
            checkChange(value) {
                console.log(value)
            }
        },
        components: {
            myRadio
        }
    }
</script>

我们来看一下具体是怎么实现的吧

1. value 属性，是必须的，我们之前说过了，在使用v-model的时候，它会给元素设置一个value值，当我们使用的是一个input的时候，input原生支持value值，而当我们使用的是一个组件的时候，我们可以通过props来接收一个value值

2. label 属性，是必须的，为了能够实现单选按钮，所以需要设置一个值来确保当前按钮什么时候被选中

<template>
    <span class="my-radio">
        <span
                :class="['my-radio-container',{checked: value===label}]"
                @click="clickRadio"
        >
            <span>{{ label }}</span>
        </span>
    </span>
</template>

<script>
    export default {
        name: "Radio",
        props: {
            value: {
                type: [String, Number]
            },
            label: {
                type: [String, Number]
            }
        },
        methods: {
            clickRadio() {
                this.$emit('input', this.label);
                this.$emit('change', this.label);
            }
        }
    }
</script>

样式文件，使用scss编写，这个样式文件你可以通过自己的喜好来编写，我为了实现效果，没有做太多的样式编写

.my-radio {
    display: inline-block;
        &+.my-radio {
        margin-left: 20px;
    }
    .my-radio-container {
        display: inline-flex;
        align-items: center;

        span {
            padding: 20px 40px;
            font-size: 34px;
            border: 1px solid #d9d9d9;
            border-radius: 10px;
            position: relative;
        }
        &.checked {
            span {
            color: #54d61e;
            border-color: #54d61e;
            position: relative;
            overflow: hidden;
                &:after {
                    content: '√';
                    right: 0;
                    top: 0;
                    position: absolute;
                    font-size: 20px;
                    width: 25px;
                    height: 25px;
                    background: #54d61e;
                    color: #fff;
                }
            }
        }
    }
}

结言

感谢您的查阅，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照