Javascript 遗留php/jquery项目中的Vue组件

我有一个基于Codeigniter和jQuery的大型传统web应用程序

计划是逐步淘汰jQuery并开始使用Vuejs。我们正在逐步更换网站的某些部分

我刚刚安装了Nuxtjs，并在遗留项目中获得了我喜欢的文件结构

现在来回答问题。如何从遗留javascript文件访问Vue组件

App.vue

从“Vue”导入Vue；
从“/components/HelloWorld.vue”导入HelloWorld；
导出默认Vue.extend({
名称：“应用程序”，
组成部分：{
你好世界
}
});

梅因酒店

从“Vue”导入Vue；
从“/App.vue”导入应用程序；
从“/store”导入存储；
Vue.config.productionTip=false；
新Vue({
商店，
渲染：h=>h（应用程序）
}).$mount（“#app”）；

---

我想在普通的php/html视图中显示我的App.vue。

我现在正在做类似的事情，该项目最初是使用Thymeleaf和jQuery编写的，现在我们正在切换到vue

您可以通过几种方式在vue组件和非vue组件之间进行通信，它们都不是“漂亮的”

沟通 经典JavaScript事件 直截了当

//遗留代码
document.dispatchEvent（新的CustomEvent（'legacy-vue.something'，{detail:payload}））
//vue组件
创建（）{
document.addEventListener（'legacy-vue.something casted'，this.onsomething出现）
},
销毁（）{//不要忘记删除侦听器！
document.removeEventListener（'legacy-vue.something casted'，this.onsomething出现）
}

公开EventHub 与上一个类似，但您使用的是vue事件这是我推荐的，因为这是Vue处理事件的方式，而你的目标是使你的应用程序虚拟化

//初始化
const hub=新的Vue（）
Vue.prototype.$eventHub=hub
窗口。$vueEventHub=hub
//遗留代码
$vueEventHub.$emit（‘发生了什么事’，有效负载）
//vue组件
创建（）{
this.$eventHub.$on（'发生了什么事'，this.on发生了什么事）
},
销毁（）{
this.$eventHub.$off（'something-event'，this.onsomething出现）
}

暴露整个组件 这是最灵活的方式，但很难看出在哪里发生了什么。在我看来，基于事件的方法危害较小（跟踪事件很容易）

//vue组件
创建（）{
window.vueTableComponent=此
}
//遗留组件
vueTableComponent.fetchNextPage（）
vueTableComponent.registerOnPageFetchedCallback（回调）；

总结 无论您选择哪种方法，我都建议您这样做：

假设您有TableComponent。TableComponent几乎没有APIRL之类的道具，它会发出

行点击事件等。最好在设计组件时根本不考虑遗留代码，然后创建它的遗留包装器，因为在某一点上，它将同时用于仅vue屏幕和混合屏幕（同时用于遗留组件和vue组件）。例如：

LegacyTableComponentWrapper.vue



导出默认值{
数据：（）=>({
apiPath:null
}),
方法：{
onrow已单击（行）{
此。$eventHub。$emit（'table-row-clicked'，row）//通知旧代码
},
OnapathDefined（有效负载）{
this.apiPath=有效负载
}
},
挂载（）{
//遗留代码可能要求TableComponent采取不同的操作
//如果您不想让TableComponent知道它是否是遗留组件
//您始终可以重写它的一个或多个方法。
this.$refs['table-component']=this.overridedInImplementationofXYZ
},
创建（）{
this.$eventHub.$on（'define-api-path'，this.onApiPathDefined）
},
销毁（）{
this.$eventHub.$off（'define-api-path'，this.onApiPathDefined）
}
}

一开始肯定会有更多的工作要做，但稍后您将在vue中处理第一个视图，并且所有遗留的通信内容都会妨碍您。我现在正在做类似的事情，该项目最初是使用Thymeleaf和jQuery编写的，现在我们正在切换到vue

您可以通过几种方式在vue组件和非vue组件之间进行通信，它们都不是“漂亮的”

沟通
经典JavaScript事件
直截了当

//遗留代码
document.dispatchEvent（新的CustomEvent（'legacy-vue.something'，{detail:payload}））
//vue组件
创建（）{
document.addEventListener（'legacy-vue.something casted'，this.onsomething出现）
},
销毁（）{//不要忘记删除侦听器！
document.removeEventListener（'legacy-vue.something casted'，this.onsomething出现）
}

公开EventHub
与上一个类似，但您使用的是vue事件这是我推荐的，因为这是Vue处理事件的方式，而你的目标是使你的应用程序虚拟化

//初始化
const hub=新的Vue（）
Vue.prototype.$eventHub=hub
窗口。$vueEventHub=hub
//遗留代码
$vueEventHub.$emit（‘发生了什么事’，有效负载）
//vue组件
创建（）{
this.$eventHub.$on（'发生了什么事'，this.on发生了什么事）
},
销毁（）{
this.$eventHub.$off（'something-event'，this.onsomething出现）
}

暴露整个组件
这是最灵活的方式，但很难看出在哪里发生了什么。在我看来，基于事件的方法危害较小（跟踪事件很容易）

//vue组件
创建（）{
window.vueTableComponent=此
}
//遗留组件
vueTableComponent.fetchNextPage（）
vueTableComponent.registerOnPageFetchedCallback（回调）；

总结
无论您选择哪种方法，我都建议您这样做：

假设您有TableComponent。TableComponent几乎没有apiUrl这样的道具，它会发出
单击行的声音