diff --git a/apps/vue/src/components/Form/src/components/RadioButtonGroup.vue b/apps/vue/src/components/Form/src/components/RadioButtonGroup.vue
index c2c7b220b..3d3cd1dd7 100644
--- a/apps/vue/src/components/Form/src/components/RadioButtonGroup.vue
+++ b/apps/vue/src/components/Form/src/components/RadioButtonGroup.vue
@@ -4,14 +4,14 @@
 <template>
   <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
     <template v-for="item in getOptions" :key="`${item.value}`">
-      <RadioButton :value="item.value" :disabled="item.disabled">
+      <RadioButton :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
         {{ item.label }}
       </RadioButton>
     </template>
   </RadioGroup>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, computed } from 'vue';
+  import { defineComponent, PropType, computed, ref } from 'vue';
   import { Radio } from 'ant-design-vue';
   import { isString } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
@@ -22,6 +22,7 @@
 
   export default defineComponent({
     name: 'RadioButtonGroup',
+    emits: ['change'],
     components: {
       RadioGroup: Radio.Group,
       RadioButton: Radio.Button,
@@ -37,8 +38,9 @@
     },
     setup(props) {
       const attrs = useAttrs();
+      const emitData = ref<any[]>([]);
       // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props);
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
 
       // Processing options value
       const getOptions = computed((): OptionsItem[] => {
@@ -51,7 +53,10 @@
         return options.map((item) => ({ label: item, value: item })) as OptionsItem[];
       });
 
-      return { state, getOptions, attrs };
+      function handleClick(...args) {
+        emitData.value = args;
+      }
+      return { state, getOptions, attrs, handleClick };
     },
   });
 </script>