vu2自定义组件绑定v-model

效果

<!-- qm-radio组件 -->
<template>
    <div class="qm-radio" :modelValue="modelValue" @click="radio_change">
        <span class="circle" :style="radioStatus ? style : {} ">{{radioStatus ? '✓' : ''}}</span>
        <span class="title">{{label}}</span>
    </div>
</template>

<script>
export default {
    name: 'QmRadio',
    props: {
        // 标签
        label: {
            type: String,
            default: '测试数据'
        },
        // props定义modelValue
        modelValue: {
            type: Boolean,
            default: false
        },
        // 选中颜色
        bgColor: {
            type: String,
            default: '#092D59'
        }
    },
    watch: {
        // 监听modelValue变化复制给当前绑定元素实现绑定
        modelValue: {
            immediate: true,
            handler(val) {
                this.radioStatus = val;
            }
        }
    },
    // 给modelValue绑定事件
    model: {
        prop: 'modelValue',
        event: 'getValue'
    },
    data() {
        return {
            style: {
                background: this.bgColor
            },
            radioStatus: false
        };
    },
    methods: {
        radio_change() {
            this.radioStatus = !this.radioStatus;
            // 将当前页面绑定数值变化与v-model绑定
            this.$emit('getValue', this.radioStatus);
            this.$emit('change', this.radioStatus);
        }
    }
};
</script>

<style lang="scss" scoped>
.qm-radio {
    display: flex;
    align-items: center;
    .circle {
        width: 16px;
        height: 16px;
        border: 1px solid #7C8DAF;
        border-radius: 50%;
        margin-right: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #ffffff;
    }
    .title {
        font-size: 12px;
        color: #4C6C94;
        line-height: 17px;
        font-weight: 400;
    }
}
</style>

<!-- qm-radio组件使用 -->
<qm-radio v-model="radio" :label="'测试单选按钮'" @change="radio_change"></qm-radio>

vue3自定义组件绑定v-model

效果

<template>
    <div class="qm-radio" @click="radioChange">
        <span class="circle" :style="radioStatus ? style : {} ">{{radioStatus ? '✓' : ''}}</span>
        <span class="title">{{props.label}}</span>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive} from 'vue'

const props = defineProps({
    // 标签
    label: {
        type: String,
        default: '测试数据'
    },
    // props定义modelValue
    modelValue: {
        type: Boolean,
        default: false
    },
    // 选中颜色
    bgColor: {
        type: String,
        default: '#092D59'
    }
})

const style = reactive({
    background: props.bgColor
})

const radioStatus = ref(false)
// vue3使用事件前需先声明
const emits = defineEmits(['update:modelValue', 'change'])
// 检测modelValue的变化 与此页面元素绑定
watch(() => props.modelValue, (val): void => {
    radioStatus.value = val
},{
    immediate: true
})

//  绑定change
const radioChange = (): void => {
    radioStatus.value = !radioStatus.value
    // 触发update:modelValue实现将此页面数值绑定到v-model
    emits('update:modelValue', radioStatus.value)
    emits('change', radioStatus.value)
}
</script>

<style lang="scss" scoped>
.qm-radio {
    display: flex;
    align-items: center;
    .circle {
        width: 16px;
        height: 16px;
        border: 1px solid #7C8DAF;
        border-radius: 50%;
        margin-right: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #ffffff;
    }
    .title {
        font-size: 12px;
        color: #4C6C94;
        line-height: 17px;
        font-weight: 400;
    }
}
</style>

<!-- qm-radio组件使用 -->
<qm-radio v-model="radio" :label="'测试单选按钮'" @change="radio_change"></qm-radio>