uni-app中继承extends和mixins是否无法继承组件

发布于 1周前 作者 itying888 来自 Uni-App

uni-app中继承extends和mixins是否无法继承组件
在vue中，写在基类的组件用components局部注册后，子类是可以直接用的，

但在uni-app，我用extends或mixins引用带组件的基类，在子类中直接使用组件会报错：

Not found -1;-1,1,6-1;1;-1;-1,1,6-1;1,0,1 at view.umd.min.js:1

请问这个问题怎么解决？只能在子类注册么

图片 图片 图片


Harmonyos Next教程
14 回复

问题确认，已加分，后续会考虑优化


从问题描述来看能了解大概，为避免搞错，还是提供一个示例工程看下。

https://github.com/SwordMasterJS/uniapp-extends-mixins-.git 请大佬看看

就改了pages里面的三个文件夹

承接H5、小程序、APP等外包：

经验丰富，做过多种类型项目，有案例可看；
整个项目外包可以找我（小团队接单，面向客户、产品）；
只需要前端部分也可以找我（个人接单，面向服务端合作伙伴）；
wechat（13070273424）；

这都优化了10多个月了，看了是没戏了，讲道理，这个需求还是挺常见的

一年过去了。。。

一年半过去了

两年半过去了

完蛋，我也遇到这个问题啦

2025年了，有解决办法吗？

解决办法无非就是笨一点，在引入mixin的地方把组件都同时注册一遍

回复 雷峰: 有效了，哥谢谢你

在uni-app中，extends 和 mixins 是两种用于代码复用和继承的机制，但它们的使用场景和具体行为有所不同。针对帖子中的疑问，即是否无法继承组件，这里提供一些代码案例来说明这两者的行为，并澄清一些常见的误解。

extends

extends 主要用于继承另一个页面的配置或组件的选项。在uni-app中，它更多用于页面配置，而不是组件。如果你尝试用 extends 来继承一个组件，可能会遇到一些问题，因为组件的继承通常需要更细致的处理，比如模板、样式等。

// 父页面或组件配置
const ParentPage = {
  data() {
    return {
      parentData: 'I am from parent'
    };
  },
  methods: {
    parentMethod() {
      console.log('Parent method called');
    }
  }
};

// 子页面配置
const ChildPage = Object.assign({}, ParentPage, {
  data() {
    return Object.assign({}, ParentPage.data(), {
      childData: 'I am from child'
    });
  },
  methods: {
    ...ParentPage.methods,
    childMethod() {
      console.log('Child method called');
    }
  }
});

// 注意：这里使用的是Object.assign模拟extends行为，实际中应使用extends关键字（如果适用）

mixins

mixins 是一种在多个组件或页面中共享代码的方式。它允许你将可复用的逻辑抽取到一个单独的文件中，然后在需要的组件或页面中引入。

// mixin文件
const myMixin = {
  data() {
    return {
      mixinData: 'Data from mixin'
    };
  },
  methods: {
    mixinMethod() {
      console.log('Method from mixin');
    }
  }
};

// 组件文件
export default {
  mixins: [myMixin],
  data() {
    return {
      componentData: 'Data from component'
    };
  },
  methods: {
    componentMethod() {
      console.log('Method from component');
    }
  }
};

在上面的例子中，mixins 成功地在组件中引入了共享的数据和方法。

总结

在uni-app中，extends 和 mixins 都有其适用的场景。extends 更多用于页面配置的继承，而 mixins 则更适合在组件间共享代码。如果你遇到无法继承组件的情况，可能是因为尝试用不适合的机制（如 extends）来处理组件继承。在这种情况下，考虑使用 mixins 或通过组合组件的方式来实现功能复用。

回到顶部