uni-app vue3+vite+ts子组件内的input组件不渲染

uni-app vue3+vite+ts子组件内的input组件不渲染

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

子组件

<template>
<button />
<input />
<textarea />
</template>

H5实际渲染结果

<uni-button class="" data-v-12b99da6="" data-v-58de782f=""></uni-button> // 这里是按钮
<!------> // 这里是input
<uni-textarea data-v-12b99da6=""></uni-textarea>// 这里是textarea

更多关于uni-app vue3+vite+ts子组件内的input组件不渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app vue3+vite+ts子组件内的input组件不渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的 uni-app 渲染问题。在 uni-app 中，<input> 组件在 H5 平台下会被编译为原生 HTML 的 <input> 元素，而 <button> 和 <textarea> 会被编译为 uni-app 的自定义组件（如 <uni-button>、<uni-textarea>）。

出现 <!------> 注释节点通常是因为 Vue 3 的编译优化导致的。在 Vue 3 中，编译器会对静态节点进行优化，但有时在 uni-app 的编译环境下，某些原生 HTML 元素（如 <input>）可能被错误地识别为静态内容或出现编译问题。

解决方案：

  1. 使用 uni-app 的 <uni-input> 组件替代原生 <input>：

    <template>
  <button />
  <uni-input />
  <textarea />
</template>

  2. 如果必须使用原生 <input>，可以尝试以下方法：

    • 给 <input> 添加动态属性，避免被静态优化：
      <input :key="Math.random()" />
    • 或者使用条件渲染：
      <input v-if="true" />

  3. 检查 Vue 3 编译配置： 在 vite.config.js 中确保正确配置了 Vue 3 插件：

    import { defineConfig } from 'vite'
import uni from '[@dcloudio](/user/dcloudio)/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()]
})

  4. 更新 uni-app 相关依赖：

    npm update [@dcloudio](/user/dcloudio)/uni-app [@dcloudio](/user/dcloudio)/vite-plugin-uni
回到顶部