feat: add useParentField

src/composition/use-parent-field.ts

@@ -0,0 +1,17 @@
+import { watch, inject, WatchSource, getCurrentInstance } from 'vue';
+import { FIELD_KEY } from '../field';
+
+export function useParentField(watchSource: WatchSource) {
+  const field = inject(FIELD_KEY) as any;
+
+  if (field && !field.children) {
+    field.children = getCurrentInstance()!.proxy;
+
+    watch(watchSource, () => {
+      if (field) {
+        field.resetValidation();
+        field.validateWithTrigger('onChange');
+      }
+    });
+  }
+}

src/field/index.js

@@ -18,6 +18,8 @@ import { cellProps } from '../cell/shared';
 
 const [createComponent, bem] = createNamespace('field');
 
+export const FIELD_KEY = 'vanField';
+
 export default createComponent({
   provide() {
     return {

src/mixins/field.js

@@ -1,7 +1,9 @@
+import { FIELD_KEY } from '../field';
+
 export const FieldMixin = {
   inject: {
     vanField: {
-      from: 'vanField',
+      from: FIELD_KEY,
       default: null,
     },
   },

src/slider/index.js

@@ -1,19 +1,17 @@
 import { ref, computed } from 'vue';
+
+// Utils
 import { createNamespace, addUnit, getSizeStyle } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 
-// Mixins
-import { FieldMixin } from '../mixins/field';
-
 // Composition
 import { useRect } from '../composition/use-rect';
 import { useTouch } from '../composition/use-touch';
+import { useParentField } from '../composition/use-parent-field';
 
 const [createComponent, bem] = createNamespace('slider');
 
 export default createComponent({
-  mixins: [FieldMixin],
-
   props: {
     disabled: Boolean,
     vertical: Boolean,
@@ -174,6 +172,7 @@ export default createComponent({
 
     // format initial value
     updateValue(props.modelValue);
+    useParentField(() => props.modelValue);
 
     return () => (
       <div