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 。