[bug] MenuItem 无法销毁问题

[vok123]

问题描述

MenuItem 通过响应式控制渲染未被销毁组件

复现步骤，具体代码

<Menu>
  <MenuItem title="Title1" disabled />
  <MenuItem v-if="visible" title="Title2" disabled />
  <MenuItem  title="Title2" disabled />
</Menu>

const visible = ref(true);

setTimeout(() => {
  // 销毁时 Title2 仍存在
  visible.value = false;
}, 1000);

Menu 组件未提供移除 internalChildren publicChildren 中的MenuItem实例函数

Fix code

// fix Menu
const linkChildren = (value?: any) => {
  const link = (child: any) => {
    if (child.proxy) {
      internalChildren.push(child);
      publicChildren.push(child.proxy as any);
    }
  };
  const removeLink = (child: any) => {
    if (child.proxy) {
      let internalIndex = internalChildren.indexOf(child);
      if (internalIndex > -1) {
        internalChildren.splice(internalIndex, 1);
      }

      let publicIndex = publicChildren.indexOf(child.proxy);
      if (internalIndex > -1) {
        publicChildren.splice(publicIndex, 1);
      }
    }
  };
  provide(
    'menuParent',
    Object.assign(
      {
        removeLink,
        link,
        children: publicChildren,
        internalChildren
      },
      value
    )
  );
};

// fix MenuItem
const useParent: any = () => {
  const parent = inject<any>('menuParent', null);
  if (parent) {
    // 获取子组件自己的实例
    const instance = getCurrentInstance()!;
    const { link, removeLink } = parent;
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    link(instance);

    onUnmounted(() => {
      removeLink(instance);
    });

    return {
      parent
    };
  }
};

相关环境信息

• 操作系统：mac
• Node 版本：16.0
• NutUI 版本：3.2.5
• Vue 版本：3.2.27
• 引用方式： NPM

[yangjinjun3]

Item 别用自闭合标签试试！

[vok123]

Item 别用自闭合标签试试！

闭合与否都是组件, 本身就是没做销毁的处理

[yangjinjun3]

嗯 周五发版修复。感谢反馈

[vok123]

嗯 周五发版修复。感谢反馈

谢谢啦