uniapp无法引入公用footer

0 85 2025-03-16 15:46:14

本文目录

1. 解决方案
2. 完整源码示例

我们知道，通过如下一行命令可以引入公共组件

import Footer from '@/components/footer-bar.vue';

但是，如果只引用这一行，也是不行的。

因为虽引入了 Footer 组件，却未在模板里使用，这就导致该组件无法显示。

解决方案

1、在 <template> 标签内添加 <Footer /> 来使用这个组件。
2、导入中加入Footer

  components: {
    Footer
  },

完整源码示例

<template>
  <div>
    <!-- 页面其他内容 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/footer-bar.vue';
import { request } from '@/utils/request';
export default {
  components: {
    Footer
  },
  data() {
    return {
      ibanner: "http://127.0.0.1:8000/static/images/ibanner.png",
      experts: [],
      categories: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const homePageData = await request('/home/', 'GET');
        this.experts = homePageData.experts || [];
        this.categories = homePageData.categories || [];
      } catch (error) {
        console.error('请求出错：', error);
      }
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

这样，我们就实现了uniapp的公共组件导入。

本文地址：https://xzo.com.cn/develop/js/1257.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

uniapp

vue和uniapp是什么关系？ uniapp中引入mp-html报错怎么办，要如何正确引入？ uniapp怎样引入公共css文件 uniapp小程序图片变形/被裁切怎么办？ uniapp创建公用的请求地址 uniapp无法引入公用footer

导出教程下载word版教程

关于前端开发

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。