vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式
modal傳輸數(shù)據(jù)刷新部分頁面數(shù)據(jù)
在modal中傳入數(shù)據(jù)至頁面,并且頁面刷新。
我在網(wǎng)上看到了 vue的幾種頁面?zhèn)髦捣绞?/strong>
下面展示一些 內(nèi)聯(lián)代碼片
//$ router this.$router.push({ query: { ids: record.id } })
這種方式會刷新整個頁面
// router-link <router-link :to="{ name: 'jeecg-ChildStatistics',query:{ids:record.id} } ">
這種屬于一個頁面跳轉(zhuǎn)到另一個頁面并傳值,于是使用后還要去關(guān)閉modal并手動刷新才能看到穿過去的參數(shù)
后面在網(wǎng)上找到了 監(jiān)聽的方式來實現(xiàn)
下面展示一些 內(nèi)聯(lián)代碼片。
// A code block var foo = 'bar';
// An highlighted block ?methods:{ ? ? ? fetchData(){ ? ? ? ? ? ?console.log('路由發(fā)送變化doing...'); ? ? ?} ? }, ? created() { ? ? ? ? var self = this; ? ? ? ? self.fetchData(); ? }, ? watch:{ ? ? ? '$route':'fetchData' ? },
vue中modal數(shù)據(jù)管理
在編寫頁面時經(jīng)常會使用各組件庫的Modal組件。一般Modal組件管理的數(shù)據(jù)非常多,通常一個頁面中有多個Modal,如果不將各個Modal封裝成組件的話,數(shù)據(jù)堆砌在主頁面將使得代碼難以閱讀。但是封裝也是一門學(xué)問。
完全不封裝的Modal代碼示例
當(dāng)在主頁面管理編寫Modal及管理數(shù)據(jù)時,當(dāng)有多個Modal時會使得數(shù)據(jù)繁雜混亂,難以閱讀。
<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及其數(shù)據(jù)封裝成組件
如下封裝雖好,但是modal1、modal2,data1,data5以及數(shù)據(jù)請求方法的管理依然留在主頁面,代碼多起來后,依然顯得混亂。
<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數(shù)據(jù)進行完全封裝
最好的封裝是將數(shù)據(jù)請求與其他所有數(shù)據(jù)都進行封裝。由父組件調(diào)用子組件的方法。
<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>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
uni-app項目中引入Vant?UI組件庫完美避坑指南(純凈版)
網(wǎng)上百度uniapp使用vant時,很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項目中引入Vant?UI組件庫完美避坑指南的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實現(xiàn)方法
這篇文章主要介紹了Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11