VueJS 多个 mixin答案

【问题标题】：VueJS multiple mixinsVueJS 多个 mixin
【发布时间】：2016-05-15 19:26:21
【问题描述】：

我的脚本中有一个错误，我不知道要修复。我想导入我创建的多个 mixin。

import GoogleMaps from '../mixins/GoogleMaps.js';
import MFApi from '../mixins/MFApi.js';

    export default {
        template: require('../templates/map.html'),
        mixins: [GoogleMaps, MFApi],
(...)

但这似乎不起作用。如果 mixins 变量不止一个，我需要如何正确设置它？

一旦我将新的 mixin 添加到变量中，第一个就无法识别了。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

也许你有这样的情况。如果您导出命名模块，而不仅仅是默认情况下，那么您需要使用花括号导入它。

在我的 mixin 文件夹中，我有“regExpressions.js”文件：

export const convertImage = {
  methods: {
   ...your methods here
  }
}

和“truncateString.js”文件：

export default {
  methods: {
   ... your code here
  }
}

在我的组件中，我导入了我的 mixins。

import { convertImage } from "@/mixins/regExpressions";
import truncateString from "@/mixins/truncateString";

mixins: [truncateString, convertImage]

【讨论】：

【解决方案2】：

这确实是正确的做法，我每天都这样做。当您说 mixin '未被识别'时，这是什么意思。也许你在两个 mixins 中都有一个同名的方法或属性——在这种情况下，你有一个冲突，最后传递的冲突方法/属性将继续存在，在编译 vue 实例时覆盖以前的方法/属性。

【讨论】：