Vue3 自定义组件 v-model 的问题

如题，之前封装组件一直用的vue2的emit方式（组件写方法，使用的时候写自定义事件去接受）

今天尝试去用组件 v-model 的方式去封装组件，就遇到了个绑定的问题，首先使用组件

<Switch v-model="switchVal" />

//子组件内

<view class="r" :class="{active:value}" @click='change'>
        <view class="circle">
        </view>
    </view>

使用change事件去修改value的值

emit('update:modelValue', !value)

 

因为我需要的值是布尔值，所以取反，就卡在这里了。这里有严重的bug，不能这样去修改值。 

正确的方式应该是通过计算属性的set去触发父组件的值去更新，请看代码

//父组件不变

//子组件
<view class="r" :class="{active:value}" @click='change'>
		<view class="circle">
		</view>
</view>

//js部分
	const props = defineProps({
		modelValue: {
			type: Boolean,

		}
	})
	const emit = defineEmits(['update:modelValue'])
	const change = () => {
		value.value = !value.value
	}
	const value = computed({
		get() {
			return props.modelValue
		},
		set(value) {
			console.log('修改的值');
			emit('update:modelValue', value)
		}
	})