OnlineEducation-student-front/src/views/resourceCenter/components/MyRadioButtonGroup.vue

<template>
	<div class="my-radio-group">
		<slot></slot>
	</div>
</template>

<script setup>
	import { ref, provide } from 'vue'

	const props = defineProps({
		modelValue: [String, Number, Boolean, Object, Array, null]
	})

	const emit = defineEmits(['update:modelValue'])
	// 使用 ref 来包装 value 以确保响应性
	const valueRef = ref(props.modelValue)

	// 监听 group.value 的变化
	watch(
		() => valueRef.value,
		(newVal, oldVal) => {
			console.log('选择的右边胡麻:', newVal, oldVal)
		}
	)

	// 提供给子组件的上下文
	const groupContext = {
		value: valueRef,
		changeValue: (value) => {
			console.log('点击了吗父布局', props.modelValue)
			valueRef.value = value // 修改 ref 的值
			// 改为通过 emit 更新值
			emit('update:modelValue', value)
			emit('change', value)
		}
	}
	provide('MyRadioGroupContext', groupContext)

	const setClean = (text) => {
		valueRef.value = text
	}

	defineExpose({
		setClean
	})
</script>

<style scoped>
	.my-radio-group {
		display: flex;
		flex-wrap: wrap;
	}
</style>