Невозможно получить доступ к переменной из именованного импорта в vuejs

Question

У меня есть библиотека для компонентов vue.

components / index.js

import Graphs from './graphs/index.js'
import Tabs from './Tab'
export default { Graphs, Tab }

, затем на index.js

import lib from 'components/index.js'
export default lib

Я устанавливаю свою библиотеку натогда мое приложение vue

В моем приложении vue у меня есть следующее:

import {Graphs} from lib
console.log(Graphs) >> undefined

Однако, используя импорт по умолчанию и доступ к переменной, он работает:

import lib from lib
console.log(lib.Graphs) >> Object { props: {…}, computed: {…}, data: data(), methods: {…}, render: render(), staticRenderFns: [], _scopeId: "data-v-41c28542", beforeCreate: (1) […] }

У меня такое чувство, что это связано либо с веб-пакетом, либо с модулем babel, либо, может быть, с чем-то, чего мне не хватает, но я не могу понять, что это такое.

Answer 1

Кажется, что использование импортированного объекта не допускает именованный импорт позже.

Так что, хотя lib является объектом с ключами для графов, он не работает после такого импорта.

Так что я должен был снова экспортировать их как именованные экспорты.

, так что index.js стал:

import lib from './components/index'
export let Graphs = lib.Graphs
export default lib

Answer 2

в вашем индексном файле вы получите результат

// import lib from "components/index.js";
//  given result lib.Graphs, lib.Tabs
//  then you exporting object like { lib: { Graphs: '....', Tabs: '...' } }
export default { lib }; 

, потому что есть этот результат.в этой ситуации действие index.js не требуется