chore(DropdownMenu): use relation

src/dropdown-item/index.js

@@ -5,8 +5,8 @@ import { createNamespace } from '../utils';
 import { DROPDOWN_KEY } from '../dropdown-menu';
 
 // Composition
-import { useParent } from '../composition/use-parent';
 import { useExpose } from '../composition/use-expose';
+import { useParent } from '../composition/use-relation';
 
 // Components
 import Cell from '../cell';
@@ -41,41 +41,7 @@ export default createComponent({
       showWrapper: false,
     });
 
-    const renderTitle = () => {
+    const { parent } = useParent(DROPDOWN_KEY);
-      if (slots.title) {
-        return slots.title();
-      }
-
-      if (props.title) {
-        return props.title;
-      }
-
-      const match = props.options.filter(
-        (option) => option.value === props.modelValue
-      );
-
-      return match.length ? match[0].text : '';
-    };
-
-    const toggle = (show = !state.showPopup, options = {}) => {
-      if (show === state.showPopup) {
-        return;
-      }
-
-      state.showPopup = show;
-      state.transition = !options.immediate;
-
-      if (show) {
-        state.showWrapper = true;
-      }
-    };
-
-    const { parent } = useParent(DROPDOWN_KEY, {
-      props,
-      state,
-      toggle,
-      renderTitle,
-    });
 
     const createEmitter = (eventName) => () => emit(eventName);
     const onOpen = createEmitter('open');
@@ -94,6 +60,35 @@ export default createComponent({
       }
     };
 
+    const toggle = (show = !state.showPopup, options = {}) => {
+      if (show === state.showPopup) {
+        return;
+      }
+
+      state.showPopup = show;
+      state.transition = !options.immediate;
+
+      if (show) {
+        state.showWrapper = true;
+      }
+    };
+
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+
+      if (props.title) {
+        return props.title;
+      }
+
+      const match = props.options.filter(
+        (option) => option.value === props.modelValue
+      );
+
+      return match.length ? match[0].text : '';
+    };
+
     const renderOption = (option) => {
       const { activeColor } = parent.props;
       const active = option.value === props.modelValue;
@@ -169,7 +164,7 @@ export default createComponent({
       );
     };
 
-    useExpose({ toggle });
+    useExpose({ state, toggle, renderTitle });
 
     return () => {
       if (props.teleport) {

src/dropdown-menu/index.js

@@ -1,4 +1,4 @@
-import { ref, provide, reactive, computed } from 'vue';
+import { ref, computed } from 'vue';
 
 // Utils
 import { createNamespace, isDef } from '../utils';
@@ -6,6 +6,7 @@ import { createNamespace, isDef } from '../utils';
 // Composition
 import { useClickAway, useScrollParent, useEventListener } from '@vant/use';
 import { useRect } from '../composition/use-rect';
+import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('dropdown-menu');
 
@@ -34,11 +35,11 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    const root = ref();
     const offset = ref(0);
     const barRef = ref();
-    const root = ref();
-    const children = reactive([]);
 
+    const { children, linkChildren } = useChildren(DROPDOWN_KEY);
     const scrollParent = useScrollParent(root);
 
     const opened = computed(() =>
@@ -89,7 +90,7 @@ export default createComponent({
 
     const renderTitle = (item, index) => {
       const { showPopup } = item.state;
-      const { disabled, titleClass } = item.props;
+      const { disabled, titleClass } = item;
 
       return (
         <div
@@ -118,10 +119,8 @@ export default createComponent({
       );
     };
 
-    provide(DROPDOWN_KEY, { props, offset, children });
+    linkChildren({ props, offset });
-
     useClickAway(root, onClickAway);
-
     useEventListener('scroll', onScroll, { target: scrollParent });
 
     return () => (