[Vue] 检测本组件的插槽是否被使用

2025-09-05
 let isDataDriven = true;
    try {
      if (slots.form) {
        // 传递空参数来检测插槽
        const slotContent = slots.form({ formData: {}, formRules: {}, isEdit: false });

        // 检查是否有实际的元素节点(通过 children 数组判断)
        const hasRealContent = slotContent?.some((node) => {
          // Vue Fragment 节点,检查其 children
          if (node.type && node.type.toString() === 'Symbol(v-fgt)') {
            return Array.isArray(node.children) && node.children.length > 0;
          }

          // 其他类型的节点(正常元素节点)
          return !!(node.type && typeof node.type === 'object');
        });

        isDataDriven = !hasRealContent;
      }
    } catch (error) {
      console.error('检测插槽失败:', error);
      // 如果检测失败,根据 formConfig 来判断
      isDataDriven = !!props.formConfig;
    }

    console.log('isDataDriven', isDataDriven);

    //核心是检测是否有children节点,如果有就是被使用了,没有就是没有被使用

NEXT
[TypeScript] 常用类型