uni-app引入组件不显示-我爱编程

当前位置：: 首页; 文章; 前端
详情

uni-app引入组件不显示

前端
三生万物
0

目录结构

├─ page
    ├─ index
    ├─ ├─ js
    ├─ ├─ ├─ index.js
    └─ index.vue

本着js和模板分离的思想去做项目的，js相关代码放到index.js里

js/index.js

import uniList from '@/components/uni-ui/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';

export default {
  name: 'index',
  components: {
    uniList,
    uniListItem
  }
}

index.vue

<template>
  <view>
    <uni-list>
      <uni-list-item title="标题文字" show-arrow="false"></uni-list-item>
      <uni-list-item title="标题文字"></uni-list-item>
      <uni-list-item title="标题文字" show-badge="true" badge-text="12"></uni-list-item>
      <uni-list-item title="禁用状态" disabled="true" show-badge="true" badge-text="12"></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import index from './js/index.js';
export default index;
</script>

也没报错，也能打印出组件，但就是不显示，很奇怪，查了问了想了好久，最终尝试了不使用index.js，直接在index.vue里引入的方式，谁知还真的行，代码下如：

&lt;template&gt;
  &lt;view&gt;
    &lt;uni-list&gt;
      &lt;uni-list-item title="标题文字" show-arrow="false"&gt;&lt;/uni-list-item&gt;
      &lt;uni-list-item title="标题文字"&gt;&lt;/uni-list-item&gt;
      &lt;uni-list-item title="标题文字" show-badge="true" badge-text="12"&gt;&lt;/uni-list-item&gt;
      &lt;uni-list-item title="禁用状态" disabled="true" show-badge="true" badge-text="12"&gt;&lt;/uni-list-item&gt;
    &lt;/uni-list&gt;
  &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
import uniList from '@/components/uni-ui/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
export default {
  name: 'member_center',
  components: {
    uniTag,
    uniList,
    uniListItem
  }
}
&lt;/script&gt;

一个让我头疼了很久的问题，就这样解决了，懵了，可能是uniapp或小程序做的限定吧

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。

uni-app引入组件不显示

十分钟搞定Pinia的使用与原理

JavaScript常规加密技术

Vue3父组件调用子组件方法

Pinia封装使用

vue3组件通信方式