vue 许多页面，我很多代码是可以复用的，怎么打包成模块
课程设计
1
比如下面这段代码，多个页面都有这段代码，由于参数过多，还有很多 双向绑定的元素：
function handleDelete (index, row) { // 删除, patch方法修改is_active
const params = { id: row.id, is_active: false }
patchMethod(data.url + row.id, params)
data.searchResult = data.searchResult.filter(x => x.id !== row.id) // 更新表格
childrenData.value.addRecycleDataLength()
// 改变行数和页数
page.totalCount = page.totalCount - 1 // 总行数
page.pageCount = Math.ceil(data.searchResult.length / page.pageSize) // 总页数为当前页
}
function handleClear (index, row) { // 清空回收站,delete方法
const params = { id: row.id }
deleteMethod(data.url + row.id, params)
data.searchResult = data.searchResult.filter(x => x.id !== row.id)
childrenData.value.subRecycleDataLength()
// 改变行数和页数
page.totalCount = page.totalCount - 1
page.pageCount = Math.ceil(data.searchResult.length / page.pageSize)
}
我现在把上面的代码单独写在 一个 buttom.js文件中 然后要用
import './ buttom.js'
这样用不了，要怎么实现这些代码的复用
-
有两种方式：
- buttom.js里每个方法单独export
例如export function handleDelete() { } export function handleClear() { } xxx.vue 导入： import {handleDelete ,handleClear } from 'buttom.js'- buttom统一暴露
const commonUtils = { handleDelete(key) { }, handleClear(key) { ] } export default commonUtils xxx.vue导入： import commonUtils from 'buttom.js' 使用： commonUtils.handleDelete(key)
注意！！！，第一种之所以导入时用{}包裹，并不是es6的解构，而是es6按需导入的语法，虽然看着一样，但是是有区别的，例如你如果用默认统一导出（就是第二种的导出方式，但是却用第一种的导入方式是不行的） 还有就是第一种方法还能加以改进，每个方法单独导出的同时，最后还能用一个总方法统一导出一下，这样在调用时也就可以使用第二种 xxx.xxx的格式了 let allFuc() = { handleClear:function(key) { return handleClear(key) } } export { allFuc }
-
代码如下：
export { handleDelete, handleClear } import { handleDelete, handleClear } './ buttom.js'
发表回复