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

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

目录

modal传输数据刷新部分页面数据

vue中modal数据管理

完全不封装的Modal代码示例

将Modal及其数据封装成组件

将Modal数据进行完全封装

modal传输数据刷新部分页面数据

在modal中传入数据至页面,并且页面刷新。

我在网上看到了 vue的几种页面传值方式

下面展示一些 内联代码片

//$ router this.$router.push({ query: { ids: record.id } })

这种方式会刷新整个页面

// router-link <router-link :to="{ name: 'jeecg-ChildStatistics',query:{ids:record.id} } ">

这种属于一个页面跳转到另一个页面并传值,于是使用后还要去关闭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时会使得数据繁杂混乱,难以阅读。

<template>   <div>     <Modal v-model="modal1">       {{ data1 + data2 + data3 }}     </Modal>     <Modal v-model="modal1">       {{ data1 + data2 + data3 }}     </Modal>   </div> </template> <script> export default {   name: "ModalTest",   data() {     return {       modal1: false,       data1: 1,       data2: 2,       data3: 3,       modal2: false,       data4: 1,       data5: 2,       data6: 3,     };   },   methods: {     getData() {       reqest("http://api",{params:1}).then((res) => {         this.data1 = res.data;         this.modal1 = true;       });     },     getData2() {       reqest("http://api",{params:2}).then((res) => {         this.data5 = res.data;         this.modal2 = true;       });     },   }, }; </script> 将Modal及其数据封装成组件

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

<template>   <div>     <modal-1 :modal1='modal1' :data1='data1'/>     <modal-1 :modal2='modal2' :data5='data5'/>   </div> </template> <script> import modal1 from './modal1.vue'; import modal2 from './modal2.vue'; export default {   name: "ModalTest",   comments:{modal1,modal2},   data() {     return {       modal1: false,       data1: 1,       modal2: false,       data5: 2,     };   },   methods: {     getData() {       reqest("http://api", { params: 1 }).then((res) => {         this.data1 = res.data;         this.modal1 = true;       });     },     getData2() {       reqest("http://api", { params: 2 }).then((res) => {         this.data5 = res.data;         this.modal2 = true;       });     },   }, }; </script> <template>   <Modal v-model="modal1">     {{ data1 + data2 + data3 }}   </Modal> </template> <script> export default {   name:'modal1',   prop:{     data1:Number,     modal1:Boolean,   },   data() {     return {       data2:2,       data3:3,     }   } } </script> 将Modal数据进行完全封装

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

<template>   <div>     <modal-1 ref="modal1"/>     <modal-1 ref="modal2"/>   </div> </template> <script> import modal1 from './modal1.vue'; import modal2 from './modal2.vue'; export default {   name: "ModalTest",   comments:{modal1,modal2},   methods: {     getData() {       this.$refs.modal1.getData(1);       this.$refs.modal2.getData(2);     },   }, }; </script> <template>   <Modal v-model="modal1">     {{ data1 + data2 + data3 }}   </Modal> </template> <script> export default {   name:'modal1',   data() {     return {       modal1:false,       data1:1,       data2:2,       data3:3,     }   },   methods: {      getData(params) {       reqest("http://api", { params: params }).then((res) => {         this.data1 = res.data;         this.modal1 = true;       });     },   }, } </script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读