场景
有些时候,我们需要将一个页面拆分成各个模块。
这些模块包含增加,删除,修改,等
并且这些模块会处理非常复杂的业务逻辑问题
所以,我们最好是将他们分开
如何将分离新增模块拆离出去
主页面
<template> <div> <el-button @click="addHanlder">新增</el-button> <ul> <li v-for="item in listArr" :key="item.id"> {{ item.name }} </li> </ul> </div> </template> <script lang="ts" setup> import { ref} from 'vue' // 导入新增模块的业务逻辑,注意不能够写成add.ts import addHooks from './add' // 定义接口 interface listType{ name?:string, age ?:number, id:string, // 可以有任意多个字段-任意类型 [propN:string]:any, } let listArr=ref<listType[]>([ {name:'张三',age:21,id:'001'}, {name:'李四',age:20,id:'002'}, {name:'周六',age:28,id:'004',aa:'xx'}, ]) // 使用新增模块 let { addHanlder }=addHooks(listArr.value); </script>
add.ts文件
// 新增功能的逻辑 // 注意这里需要说明listArr的参数类型哈 { name?: string; age?: number; id: string }[] function addHooks(listArr: { name?: string; age?: number; id: string }[]) { function addHanlder() { listArr.push( {name:'王五',age:24,id:'005'} ) } return { addHanlder } } export default addHooks