Невозможно импортировать Mixin из компонента Single File в Vue.js - PullRequest
Новая
       14

Невозможно импортировать Mixin из компонента Single File в Vue.js

0 голосов
/ 01 июня 2018

Я использую Laravel с Vue.js и Webpack / Laravel Mix.У меня есть отдельные файловые компоненты, которые должны использовать Mixins.Структура папок выглядит следующим образом: 

/app.js
/vue-components/Component.vue
/mixins/api/common.js

common.js определяет миксин следующим образом: 

export default {
   // all content goes here
}

И когда я импортирую его из app.js и console.log, онпоказывает данные: 

import industries from "./mixins/api/common";
console.log(industries); // this shows the content
Vue.component(
    'some-component',
    require("./vue-components/Component.vue")
);

В Component.vue я использую mixins: [ industries ],, и это дает мне следующую ошибку:

Component.vue?bb93:73 Uncaught ReferenceError: industries is not defined

Вопрос 1: Разве невозможно объявить миксины глобально и ссылаться на них из компонента?

Чтобы решить эту проблему, я попытался импортировать миксин непосредственно в компонент вместо глобального файла app.js.Но import industries from "./mixins/api/common"; в Component.vue выдает следующую ошибку при попытке компиляции с npm run: 

This relative module was not found:

* ./mixins/api/common in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"babel-plugin-syntax-dynamic-import","webpack-async-module-name"],"env":{"development":{"compact":false}}}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/vue-components/Component.vue

Вопрос 2: Если мне нужно импортировать миксин из одного файлаКомпоненты, как должен выглядеть путь?

1 Ответ

0 голосов
/ 01 июня 2018

Как и в Vue Document , вы можете объявить mixin глобально 

//- build your mixin
const mixin = {
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
}

Vue.mixin(mixin)


new Vue({
  myOption: 'hello!'
}) 
// "hello!"

Вы также можете импортировать mixin для использования для каждого компонента.

In выше вашего Component.vue, путь импорта неверен.Вы должны сделать import industries from "../mixins/api/common"

...