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

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

实现原理

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

结言

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