Varlet UI 组件库中 MenuSelect 组件在 HTML 中的使用注意事项

在 Vue.js 生态系统中，Varlet 是一个优秀的移动端组件库。其中 MenuSelect 组件作为常用的下拉选择组件，在实际开发中有着广泛的应用场景。然而，当开发者直接在 HTML 文件中使用 CDN 方式引入 Varlet 时，可能会遇到一个典型的问题：MenuSelect 组件只能显示最后一项选项。

问题现象

开发者在使用 CDN 方式引入 Varlet 时，按照常规方式编写 MenuSelect 组件代码：

<var-menu-select v-model="menuValue">
  <var-button type="primary">{{ value ? value : '请选择' }}</var-button>
  <template #options>
    <var-menu-option label="吃饭" />
    <var-menu-option label="睡觉" />
    <var-menu-option label="打游戏" />
  </template>
</var-menu-select>

预期应该显示三个选项，但实际运行时却发现只有最后一个选项"打游戏"能够正常显示，前两个选项无法显示。

问题根源

这个问题的根本原因在于 Vue 3 对于 DOM 模板解析的特殊处理。当 Vue 直接在 HTML 文件中解析模板时（即非单文件组件场景），它遵循的是浏览器原生的 HTML 解析规则。在 HTML 规范中，自定义元素（如我们的组件）的自闭合标签处理方式与标准 HTML 元素不同。

具体来说，在 DOM 模板中：

1. 浏览器会忽略自定义元素的自闭合标签后的其他内容
2. 只有最后一个自闭合标签会被正确解析
3. 这导致前几个 <var-menu-option> 组件实际上没有被 Vue 正确识别和注册

解决方案

解决这个问题的方法很简单：避免在 DOM 模板中使用自闭合标签，而是使用完整的开闭标签形式：

<var-menu-select v-model="menuValue">
  <var-button type="primary">{{ value ? value : '请选择' }}</var-button>
  <template #options>
    <var-menu-option label="吃饭"></var-menu-option>
    <var-menu-option label="睡觉"></var-menu-option>
    <var-menu-option label="打游戏"></var-menu-option>
  </template>
</var-menu-select>

深入理解

这个问题不仅限于 Varlet 的 MenuSelect 组件，而是适用于所有在 DOM 模板中使用的自定义组件。Vue 官方文档中也有相关说明：在 DOM 模板中，自定义组件必须使用完整的闭合标签。

这种限制源于 HTML 规范本身：

• 浏览器对标准 HTML 元素（如 <img>、<input>）的自闭合有特殊处理
• 但对于自定义元素，浏览器会将其视为普通元素，需要显式闭合
• Vue 的模板编译器在 DOM 模式下必须遵循浏览器的解析规则

最佳实践

1. 在 CDN 引入场景下，始终为自定义组件使用完整标签形式
2. 如果使用构建工具（如 Vite、Webpack），在单文件组件（.vue）中可以使用自闭合形式
3. 对于复杂的应用，建议使用构建工具而非纯 CDN 方式
4. 注意区分 DOM 模板和字符串模板的解析差异

总结

Varlet 组件库中的 MenuSelect 组件在 CDN 模式下使用时，开发者需要注意 DOM 模板解析的特殊性。通过使用完整的组件标签形式而非自闭合标签，可以避免选项显示不全的问题。理解 Vue 在不同环境下的模板解析差异，有助于开发者更好地在各种场景下使用 Vue 生态中的组件库。