vuejs - 如何將數據傳遞給webpacked根實例

我有一個應用程序，我使用Single File Components在表中顯示數據。根據我想要在結果中包含的search字符串和列查詢數據（數據基本上由ajax請求獲取）。vuejs - 如何將數據傳遞給webpacked根實例

我的目標是創建一個可重用組件，以便我可以將查詢文本和列名傳遞給組件。通常我可以使用props和slots，但由於我使用的是Single File Components，我不知道如何將數據傳遞給組件。

的「public」界面的Single File Component如下所示：

<!-- 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時都必須重新打包組件，並且爲了多次使用組件，我需要每次都打包每個使用不同數據的實例...

任何想法？

來源

2017-01-03 Johannes

找到您的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。

來源

2017-01-03 11:20:54

這並沒有什麼幫助，因爲main.js也是封裝好的。因此，對於數據的每次更改，我都必須重新包裝SFC。我在尋找的是將單個文件組件暴露給全局範圍的方式，所以我可以通過一個使用這些組件的新Vue實例在腳本標記中使用它們。 – Johannes

@Johannes但爲什麼你不能提供'數據'與您可以在main.js中進行的Ajax調用的結果？或者完全使用計算的屬性而不是'data'？ –

因爲ajax請求需要一些用戶輸入/配置，以便發送正確的查詢。我需要能夠從全局範圍配置/傳遞此輸入到webpacked組件。 – Johannes

vuejs - 如何將數據傳遞給webpacked根實例

回答

相關問題