自定义组件实现v-model(swicth)

父页面

<template>
    <view>
        <evan-form ref="form" :model="info">
                <evan-form-item label="是否是vip：" prop="vip">
				<view class="form-input"><s-switch style="float: right;"v-model="info.vip"></s-switch></view>
			</evan-form-item>
        </evan-form>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                vip:1
            }
        }
    }
</script>

组件 s-switch

<template>
    <view class="s-switch-container">
        <view class="s-switch-item" v-for="item in switchList" :key="item.key"
		:class="[ value == item.key ? 's-switch-selected' : '' ]"
         @click="selectItem(item)">
            {{item.value}}
        </view>
    </view>
</template>

<script>
export default {
    name: 'switch',
    props: {
		// 实现v-model必须这么写，原因还没弄懂
        value: {
            type: Number || String,
            default: 0
        },
        switchList: {
            type: Array,
            default() {
				return [
					{
						key: 0,
						value: '否'
					},
					{
						key: 1,
						value: '是'
					}
				]
			} 
				
        }
    },
    data () {
        return {
        }
    },
    methods: {
        selectItem (info) {
			//v-model实现的是v-bind:value 和v-on:input，这句更新父级组件的value
			this.$emit("input", info.key); 
        }
    }
}
</script>

<style lang="scss" scoped>
    .s-switch-container {
        padding: 2upx;
        display: flex;
        flex-direction: row;
        width: 160upx;
        height: 60upx;
        border-radius: 100upx;
        border: 4upx solid #1D8BE8;
    }
    .s-switch-item {
        color: #1D8BE8;
        font-size: 30upx;
        width: 80upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .s-switch-selected {
        color: #ffffff;
        border-radius: 40upx;
        background: #1D8BE8;
    }
</style>

 

效果