需求简述:在日常开发中,我们时常需要对以前无法重构的老项目进行维护,但是之前的老项目很多都是原生写的,或者jQ写的,维护的内容使用这些技术太麻烦,很想使用vue,但是不想改动之前的代码。
维护描述:我在项目中使用vue2以及element ui,所以这两个东西正常引入
方式:
- 在html找到最外层div加上 id='app'
- 找到script标签加上
new Vue({ el: '#app', })
- 在外部定义一个变量 let vm = ''
- 在vue的mounted函数中给外部变量赋值:vm = this
- 现在回到代码里,我给出关键代码
//表格点击事件部分 { field: '', title: '操作区', formatter: function (value, row, index) { let $row = JSON.stringify(row).replace(/\"/g,"'") let html = '' html = '<a onclick="test(' + $row + ')">配置短信内容</a>' return html } } //script最外层部分 let vm = '' function test(row){ //调用vue中methods中的test()方法 vm.test(row) } //vue部分 new Vue({ el: '#app', methods:{ test(row){ console.log(row) } }, mounted(){ vm = this } })
这样就能在原生事件里面调用vue中methods中的方法了