TDesign Vue Next 中 Dialog 组件 body 属性使用 VNode 的注意事项

TDesign Vue Next 中 Dialog 组件 body 属性使用 VNode 的注意事项

【免费下载链接】tdesign-vue-next A Vue3.x UI components lib for TDesign. 项目地址: https://gitcode.com/gh_mirrors/tde/tdesign-vue-next

问题背景

在使用 TDesign Vue Next 的 Dialog 组件时，开发者可能会遇到一个常见问题：当尝试通过 body 属性传入 VNode 节点时，控制台会显示警告信息。这种情况在使用 DialogPlugin 方式调用对话框时尤为常见。

问题表现

开发者通常会尝试以下两种方式传入 VNode：

// 方式一：直接传入 VNode
DialogPlugin({
    theme: 'danger',
    header: '抱歉，未通过',
    body: h('ul', [
        h('li', '1'),
        h('li', '2'),
        h('li', '3'),
    ]),
});

// 方式二：传入返回 VNode 的函数
DialogPlugin({
    theme: 'danger',
    header: '抱歉，未通过',
    body: () => h('ul', [
        h('li', '1'),
        h('li', '2'),
        h('li', '3'),
    ]),
});

这两种方式虽然都能工作，但第一种方式会导致控制台警告，提示应该传入函数而非直接传入 VNode。

正确用法

经过官方验证，正确的使用方式应该是传入一个返回 VNode 的函数，并且需要显式地使用 return 语句：

DialogPlugin({
    theme: 'danger',
    header: '抱歉，未通过',
    body: () => {
      return h('ul', [
        h('li', '1'),
        h('li', '2'),
        h('li', '3'),
      ]);
    }
});

技术原理

这种设计源于 Vue 3 的响应式系统特性。当直接传入 VNode 时，可能会导致响应式跟踪失效，因为 VNode 本身不是响应式的。而传入一个函数可以确保每次渲染时都能生成新的 VNode 实例，保证组件的响应式行为正确。

排查建议

如果开发者遇到类似问题但无法复现，可以尝试以下排查步骤：

1. 确保使用的是最新版本的 TDesign Vue Next（当前最新为 1.13.1）
2. 清除项目依赖缓存：删除 node_modules 并重新安装
3. 如果是使用 Vite，清除构建缓存
4. 检查项目中是否有其他因素影响了 Dialog 的行为

总结

在 TDesign Vue Next 中使用 Dialog 组件的 body 属性时，最佳实践是始终传入一个返回 VNode 的函数，而不是直接传入 VNode。这不仅能避免控制台警告，也能确保组件的响应式行为正确。对于复杂的对话框内容，建议将内容提取为独立的组件，通过函数返回该组件的渲染结果，这样既能保持代码整洁，又能避免潜在的问题。

【免费下载链接】tdesign-vue-next A Vue3.x UI components lib for TDesign. 项目地址: https://gitcode.com/gh_mirrors/tde/tdesign-vue-next