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) […] }

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

Answer 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操作

Answer 2

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

因此，即使lib是具有Graphs键的对象，在这样导入之后，它也无法正常工作。

所以我要做的是再次将这些出口作为命名出口。

所以index.js变成了：

r10

无法从Vue.js中的命名导入访问变量

2 个答案: