我有一个应用程序,正在使用Single File Components
在表中显示数据。根据要包含在结果中的search
字符串和列查询数据(数据基本上是通过ajax请求获取的)。
我的目标是创建一个可重用的组件,以便可以将查询文本和列名传递给该组件。通常,我可以为此使用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时,我都必须重新打包组件,并且对于组件的多种用途,我需要分别打包每个使用不同数据的实例的时间...有任何想法吗?
最佳答案
找到您的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
。关于javascript - vuejs-如何将数据传递到Webpacked根实例,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41436781/