tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

vue 弹窗里边的数据更新更改修改后如何刷新主页面内容,弹窗里边的内容是单独的组件。子组件执行父组件方法

257人阅读 2025/2/22 12:47 总访问:2060237 评论:0 收藏:0 手机
分类: 前端

其实在封装的组件弄一个事件即可,不然在关闭弹窗的时候刷新数据不科学,这样每次都要刷新数据。

子组件,弹窗里边提供一个方法

弹窗里边提供一个方法在需要的时间点去触发即可,这样就可以执行父组件中的方法了

  1. const emitWays = defineEmits(['changeCheck'])
  2. const checkSuccess = (_rowData: any) => {
  3. // 触发事件,可以在父组件中去刷新数据
  4. emitWays('changeCheck')
  5. }

父组件,绑定一下事件

  1. <el-dialog title="项目专班成员" :destroy-on-close="true" :append-to-body="false" width="86%" v-model="state.dialoglabe_ProjectTeamMembers">
  2. <div>
  3. <ProjectTeamMembersCustomTrain
  4. :programType="2"
  5. :programID="state.pageParam.trainingProgramId"
  6. :subProgramId="state.training_subprogramid"
  7. :subProgramType="state.training_subProgramType"
  8. @changeCheck="changeCheck"
  9. ></ProjectTeamMembersCustomTrain>
  10. </div>
  11. </el-dialog>
  12. <script setup lang="ts" name="project-team-members">
  13. // 弹窗里边审核之后刷新数据
  14. const changeCheck = ()=>{
  15. // alert("弹窗里边审核之后刷新数据!")
  16. getTrainingSubProgramDataList()
  17. }
  18. </script>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue.js+Layer实现表格数据绑定与更新

一:使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接...

vue.js 实现省市联动

HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

vue.js常见问题

一:花括号当做字符串显示的问题1:检查下绑定到vue.js的id是否重复,如果id重复了,就有可能存在这种问题,因为有可能把数...

vue.js常用指令

v-html可以把字符串当成一个html来渲染,而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

干货!div滚动到一定位置就固定他vue中实现一侧滚动到底部就固定

尊重原创:转载请注名出处div滚动到一定位置就固定他,例如左边的内容很多,右边的内容很少,如果不处理滚动到一定位置后右...

vue.js常用指令事件绑定等vue过滤器解析状态过滤器多个参数vue表格状态解析vue解析类型element ui解析类型状态el-tag

按照html的编码显示:v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

vue.js if用法

vue.js if可以做一些判断例如我们要把下面这个输出varvm=newVue({ el:&quot;#content&quot;, data:{ titles:[&quot;小明...

vue.js 学习日记第一章-安装vue开发环境

官网:https://cn.vuejs.org/v2/guide/ 这是一篇学习性文章,不定时更新,用来记录我学习vue.js的过程。 首先,是v...

vue.js 学习日记第二章-在vue中编写function及一些简单指令

官网:https://cn.vuejs.org/v2/guide/ vue.js 学习日记第一章:http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第三章-vue中的简单事件及事件修饰符

官网:https://cn.vuejs.org/v2/guide/ vue.js 学习日记第二章:http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第四章-vue中文本框数据获取与绑定及computed计算属性

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第三章: http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第五章-v-if和v-for指令的使用方式

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第四章: http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第六章-vue组件初步学习

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第五章: http://www.tnblog.net/18323015640/article/details/2...

vue.js学习日记第七章-搭建脚手架

官网:https://cn.vuejs.org/v2/guide/ vue.js学习日记第六章: http://www.tnblog.net/18323015640/article/details/2...

vue实现好友选中效果

逛过vue官网肯定会发现一个有趣的指令“v-for”,相比与以前拼接html代码确实要上档次一点,而且减少了工作量,先看一波效...

js时间格式化vue.js时间格式化带T 时间格式化

也可以借助moment库, 参考:https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大,推荐可以使用day.js...