当前位置: 首页 > 知识库问答 >
问题:

vue.js - vue 如何更好的设计一个公共的新增、编辑页面?

卫高谊
2024-05-20

如何更好的设计一个公共的新增、编辑页面?
需求如下:假设有一个新增、编辑功能,在很多页面都需要能够点击按钮,调用公共的添加页面,这个时候,我想到的办法是,通过按需加载的方式,把添加页面放到 app.vue 里面,然后配合vuex,设计一个数字变量,在需要触发弹框的页面,使这个变量+1,然后再app.vue监听这个数字的变化,如果变化,则调用弹框,

请问这一块是否有更好的实现思路?

问题二:
如果这种业务场景非常多,那么我希望把 import xxxxDialog from './xxxxDialog' 组件语句,使用组件代码

<xxxxDialog :isShow='isShow'></xxxxDialog>

以及所有的相关变量,都放到指定的单独文件里面,从而是代码更整洁,请问该如何实现?

目前只能想到把 变量、相关函数 放到单独的文件,比如xxxxDialogMixins.js,但是导入语句,是使用组件代码无法独立出来。

共有1个答案

裴姚石
2024-05-20

对于问题一:直接在pinia或者vuex中设计一个布尔类型的变量,比如isshow,在app.vue或者某个顶层组件中引入弹框组件和isshow,不需要再绕弯子监听数字的变化。
对于问题二:完全没必要把导入语句也和组件逻辑封装在一起。

 类似资料:
  • 简述:目前准备要做页面重构,现有的弹窗样式要弃用,要改成侧边弹窗,最先尝试的是封装一个公共弹窗组件,通过传参,父组件向子组件传值的形式实现新建或编辑功能,但是面临一个问题,有非常多的接口,每个页面都有不同的新建和编辑的API接口,但是我又不想把这些接口都放在公共组件里面,感觉复用性不高,大佬们有啥办法吗~~~ 正在尝试处理接口的放置

  • 我有一个情况,几个表(TableA 当我使用hibernate逆向工程从这个数据库生成JPA实体时,它会在TableA和TableB for TableC中创建多对一关系。通常要创建一对一的关系,我将TableA主键作为TableC的主键,但由于我有其他表(TableB)也与TableC具有一对一的关系,我不能这样做。因此我不得不在TableA和TableB中使用TableC的外键(这导致了JPA

  • 页面的概念 传统的html页面,一个html就是一个页面, 在QAP中,一个页面的概念就是一个JS, 任何一个JS挂载后都可以成为一个页面。 页面的编写 import {mount} from 'weex-rx-mounter'; import DetailPage from './detail-page'; mount(<DetailPage />, 'body'); 以上就是一个page的

  • 问题内容: 我想有一个header.html,它定义我所有网页的标题如何。如何将此header.html插入顶部的其他网页? 可能会有更好的方法来实现要共享的公共标头。由于我仍然认为自己是html的新手(但不适合编程),因此我愿意接受更好的建议。 谢谢。 编辑:有用的答复提到了使用PHP。但是,我使用AngularJS作为前端,而我的PHP后端仅仅是一个纯REST服务器。我更喜欢用AngularJ

  • vue如何实现页面装修的