Javascript 实例化具有属性的独立Vue.js应用程序(2.0.0rc7)
我有一个Vue.js应用程序(2.0.0rc7),它是使用单页组件构建的。主要组件称为Javascript 实例化具有属性的独立Vue.js应用程序(2.0.0rc7),javascript,vue.js,Javascript,Vue.js,我有一个Vue.js应用程序(2.0.0rc7),它是使用单页组件构建的。主要组件称为App。要将我的应用程序呈现为id为app的div,我使用以下脚本(我称之为main.js): 这种方法效果很好。我正在使用webpack解析导入。然而,我希望我的应用程序被用作一个开发人员可以在其网站中轻松使用的“接入点”。因此,我想知道如何将属性传递给主应用程序组件 例如,我想让开发人员能够使用HTML脚本标记加载我的(已构建)应用程序,然后使用以下命令对其进行实例化: App(dataObj1, data
App
。要将我的应用程序呈现为id为app
的div,我使用以下脚本(我称之为main.js
):
这种方法效果很好。我正在使用webpack解析导入。然而,我希望我的应用程序被用作一个开发人员可以在其网站中轻松使用的“接入点”。因此,我想知道如何将属性传递给主应用程序组件
例如,我想让开发人员能够使用HTML脚本标记加载我的(已构建)应用程序,然后使用以下命令对其进行实例化:
App(dataObj1, dataObj2, ..., '#id-of-div-element-to-mount')
我找到了解决问题的方法:我创建了一个init
函数,该函数将所需的数据作为输入,然后将应用程序呈现给HTML元素。我使此init函数在全局命名空间中可用:
var init = function (data, el) {
const vm = new Vue({
el: el,
template: '<app :data="data"/>',
components: {
App
},
data () {
return {
data: data
}
}
})
}
// grab existing namespace object, or create a blank object
// if it doesn't exist
var APP = window.APP || {}
APP = {
init: init
}
window.APP = APP
请参见此处的详细信息:您的问题不清楚。。。请提供用例或其他东西。改进您的问题的建议:至少提供一个示例代码,说明您希望开发人员如何使用您的东西。当然,我在问题中添加了一个示例。
var init = function (data, el) {
const vm = new Vue({
el: el,
template: '<app :data="data"/>',
components: {
App
},
data () {
return {
data: data
}
}
})
}
// grab existing namespace object, or create a blank object
// if it doesn't exist
var APP = window.APP || {}
APP = {
init: init
}
window.APP = APP
// ...
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
// ...