vue中modal传输数据并刷新部分页面数据方式_vue.js
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>