vuejs - 如何将数据传递给 webpacked 根实例

Question

我有一个应用程序，我使用Single File Components 在表格中显示数据。数据是基于search 字符串和我想要包含在结果中的列来查询的（数据基本上是通过 ajax 请求获取的）。

我的目标是创建一个可重用的组件，以便我可以将查询文本和列名传递给组件。通常我可以为此使用props 和slots，但由于我使用的是Single File Components，我不知道如何将数据传递给组件。

Single File Component 的“public”接口如下所示：

<!-- index.hmtl -->
<div id="app"></div>
<script src="./build/webpackedComponent.js"></script>

---

// main.js / Component entry point
import Vue from 'vue'
import App from './components/app.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

在App 内部，我需要 ajax 请求的数据。我的一个想法是在组件的主入口点中导入一个json 文件，但是每次更改 json 时我都必须重新打包组件，并且对于组件的多次使用，我需要分别打包它们每个使用不同数据的实例的时间...

有什么想法吗？

Answer 1

找到您的webpack.base.conf.js 文件（在我的项目中它位于build 文件夹内）或等效的配置文件，然后将library: 'myLibrary' 添加到输出对象。

（最终应该是这样的：）

module.exports = {
  entry: {
    app: ['./src/main.js']
  },
  output: {
    library: 'myLibrary',
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'
  },
  .
  .
  .

---

然后在 main.js 中，你可以像这样导出 Vue：

// main.js / Component entry point
import Vue from 'vue'
import App from './components/app.vue'

export { Vue, App };

现在在全局范围内你可以这样做：

new myLibrary.Vue({
  el: '#app',
  data: {
    value1: 12,
    value2: 14
  },
  components: { App: myLibrary.App },
  template: '<App :prop1="value1", :prop2="value2"></App>'
});

也就是说，您在 main.js 中导出的任何内容都可以通过您在 webpack 配置文件中提供的库的名称在全局范围内访问...在这种情况下，myLibrary。