vue.js - vue中使用全局mixins导致第三方组件报错，请问如何处理？

Question

最近项目中引入了第三方组件vue-org-tree死活显示不出来，控制台报错，最后用排除法，把大部分代码都注释了，才找到问题所在，原来是因为项目中用到了全局mixins，里面定义props，关键这里面定义的是几乎所有页面都需要用到的一些属性，不可能每个组件都重复写，所以也没法去掉，请问有什么办法处理呢 ？

Answer 1

有两种方式，一种是局部mininx,另外一种是命名空间 mixins。
如果你的项目中有很多组件需要共享相同的属性，使用命名空间 mixins 可能是更好的选择。它能保持代码的清晰和可维护性，同时避免全局污染。

// mixins/globalMixin.js
export const globalMixin = {
  props: {
    globalProps: {
      type: Object,
      default: () => ({
        sharedProp: ''
      })
    }
  }
};

// 在组件中使用
import { globalMixin } from '@/mixins/globalMixin';

export default {
  mixins: [globalMixin],
  computed: {
    sharedProp() {
      return this.globalProps.sharedProp;
    }
  },
  // 其他组件选项
};

Answer 2

1. 不用 vue-org-tree 找其他库。
2. 修改 mixins 混入文件，props 属性增加 prefix 前缀，同样的业务组件里面用到的部分全部都要改。
3. 使用 patch-package 变更 vue-org-tree 中冲突的 props 或者 data 属性