这篇文章主要介绍了vue中modal传输数据并刷新部分页面数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
modal传输数据刷新部分页面数据
在modal中传入数据至页面,并且页面刷新。
我在网上看到了 vue的几种页面传值方式
下面展示一些 内联代码片
//$ router this.$router.push({ query: { ids: record.id } })
这种方式会刷新整个页面
// router-link
这种属于一个页面跳转到另一个页面并传值,于是使用后还要去关闭modal并手动刷新才能看到穿过去的参数
后面在网上找到了 监听的方式来实现
下面展示一些 内联代码片。
// A code block var foo = 'bar';
// An highlighted block methods:{ fetchData(){ console.log('路由发送变化doing...'); } }, created() { var self = this; self.fetchData(); }, watch:{ '$route':'fetchData' },
vue中modal数据管理
在编写页面时经常会使用各组件库的Modal组件。一般Modal组件管理的数据非常多,通常一个页面中有多个Modal,如果不将各个Modal封装成组件的话,数据堆砌在主页面将使得代码难以阅读。但是封装也是一门学问。
完全不封装的Modal代码示例
当在主页面管理编写Modal及管理数据时,当有多个Modal时会使得数据繁杂混乱,难以阅读。
{{ data1 + data2 + data3 }} {{ data1 + data2 + data3 }}
将Modal及其数据封装成组件
如下封装虽好,但是modal1、modal2,data1,data5以及数据请求方法的管理依然留在主页面,代码多起来后,依然显得混乱。
{{ data1 + data2 + data3 }}
将Modal数据进行完全封装
最好的封装是将数据请求与其他所有数据都进行封装。由父组件调用子组件的方法。
{{ data1 + data2 + data3 }}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持0133技术站。
以上就是vue中modal传输数据并刷新部分页面数据方式的详细内容,更多请关注0133技术站其它相关文章!