vue中modal传输数据并刷新部分页面数据方式_vue.js

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时会使得数据繁杂混乱，难以阅读。

将Modal及其数据封装成组件

如下封装虽好，但是modal1、modal2，data1，data5以及数据请求方法的管理依然留在主页面，代码多起来后，依然显得混乱。

将Modal数据进行完全封装

最好的封装是将数据请求与其他所有数据都进行封装。由父组件调用子组件的方法。