混入在模板中工作，但不是从计算属性

混入（Mixins）是一种在Vue.js中复用组件逻辑的方式。它们可以包含任何组件选项，比如数据、方法、生命周期钩子等。混入对象可以包含任何组件选项。当组件使用混入对象时，所有混入对象的选项将被“混入”该组件本身的选项。

基础概念

混入的工作原理是将混入对象中的属性和方法合并到组件的实例中。如果混入对象和组件包含同名的选项，那么组件的选项会覆盖混入对象的选项。

优势

1. 代码复用：混入允许你将通用的功能抽象成一个独立的模块，然后在多个组件中复用。
2. 组织代码：通过混入，你可以将复杂的组件拆分成更小的、可复用的部分，使得代码更加模块化和易于维护。

类型

1. 全局混入：影响注册之后所有创建的每个Vue实例。
2. 局部混入：只影响在某个组件中引入的混入。

应用场景

混入特别适合于以下场景：

• 日志记录：可以在多个组件中复用日志记录逻辑。
• 权限验证：在多个组件中检查用户权限。
• 数据预处理：在组件创建之前对数据进行预处理。

遇到的问题及解决方法

问题：混入中的数据和方法与组件中的冲突

原因：当混入对象和组件包含同名的数据或方法时，组件的数据或方法会覆盖混入对象的。

解决方法：

1. 重命名：避免混入对象和组件中的数据或方法重名。
2. 使用计算属性：如果混入对象和组件需要共享某些数据，可以通过计算属性来处理这些数据，以确保数据的唯一性和正确性。

// 混入对象
const myMixin = {
  data() {
    return {
      mixinData: 'Hello from mixin'
    };
  },
  methods: {
    mixinMethod() {
      console.log('Method from mixin');
    }
  }
};

// 组件
Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      componentData: 'Hello from component'
    };
  },
  methods: {
    componentMethod() {
      console.log('Method from component');
    }
  },
  computed: {
    combinedData() {
      return this.mixinData + ' and ' + this.componentData;
    }
  }
});

参考链接

• Vue.js 官方文档 - Mixins

通过上述方法，你可以有效地使用混入来复用组件逻辑，同时避免潜在的冲突问题。