无法从 vuejs 中的命名导入访问变量

Posted 2023-02-23

【中文标题】无法从 vuejs 中的命名导入访问变量

【英文标题】：Cannot access variable from named imports in vuejs

【发布时间】：2019-05-14 22:06:45

【问题描述】：

我有一个 vue 组件库。

组件/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 应用上安装我的 lib

在我的 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) […] 

我感觉这与 webpack 或 babel 模块有关，或者可能是我缺少但无法弄清楚它是什么。

【参考方案1】：

在你的索引文件中你会得到结果

// 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 操作是不必要的

【讨论】：

这不是必需的，因为我以后会从更多文件中添加代码。当我重写 SO 问题的代码时，我犯了在导出默认值中添加额外大括号的错误。我已经编辑过了。谢谢。

【参考方案2】：

似乎使用导入的对象不允许以后进行命名导入。

因此，即使 lib 是一个带有 Graphs 键的对象，它在像这样导入它之后也不起作用。

所以我要做的就是将它们再次导出为命名导出。

所以 index.js 变成了：

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