武汉品牌设计公司_flash动画制作教程_iis搭建网站_营销网站建设专家

1.背景

在开发中,很多组件里面的一些方法很相似或者完全相同。如:

如上,用户、部门、角色等模块都有这一块代码。
我们需要将其提取出来。

2.封装hooks

新建hooks文件夹:

hooks/usePageContent.ts:

import { ref } from 'vue'
import type PageContent from '@/components/page-content/page-content.vue'function usePageContent() {const contentRef = ref<InstanceType<typeof PageContent>>()function handleQueryClick(queryInfo: any) {contentRef.value?.fetchPageListData(queryInfo)}function handleResetClick() {contentRef.value?.fetchPageListData()}return {contentRef,handleQueryClick,handleResetClick}
}
export default usePageContent

3.使用hooks

在department.vue中使用:

 <template>...  
</template><script setup lang="ts" name="department">
...import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'// setup相同的逻辑的抽取: hooks
// 点击search, content的操作
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()// 点击content, modal的操作
const { modalRef, handleNewClick, handleEditClick } = usePageModal()
</script><style scoped>
...
</style>