vue中modal傳輸數(shù)據(jù)并刷新部分頁(yè)面數(shù)據(jù)方式
更新時(shí)間：2022年04月08日 10:43:58 作者：搬磚小生
這篇文章主要介紹了vue中modal傳輸數(shù)據(jù)并刷新部分頁(yè)面數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
modal傳輸數(shù)據(jù)刷新部分頁(yè)面數(shù)據(jù)
在modal中傳入數(shù)據(jù)至頁(yè)面，并且頁(yè)面刷新。
我在網(wǎng)上看到了 vue的幾種頁(yè)面?zhèn)髦捣绞?/strong>
下面展示一些 內(nèi)聯(lián)代碼片
//$ router
this.$router.push({ query: { ids: record.id } })這種方式會(huì)刷新整個(gè)頁(yè)面
// router-link
<router-link :to="{ name: 'jeecg-ChildStatistics',query:{ids:record.id} } ">這種屬于一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面并傳值，于是使用后還要去關(guān)閉modal并手動(dòng)刷新才能看到穿過(guò)去的參數(shù)
后面在網(wǎng)上找到了 監(jiān)聽(tīng)的方式來(lái)實(shí)現(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ù)管理
在編寫頁(yè)面時(shí)經(jīng)常會(huì)使用各組件庫(kù)的Modal組件。一般Modal組件管理的數(shù)據(jù)非常多，通常一個(gè)頁(yè)面中有多個(gè)Modal，如果不將各個(gè)Modal封裝成組件的話，數(shù)據(jù)堆砌在主頁(yè)面將使得代碼難以閱讀。但是封裝也是一門學(xué)問(wèn)。
完全不封裝的Modal代碼示例
當(dāng)在主頁(yè)面管理編寫Modal及管理數(shù)據(jù)時(shí)，當(dāng)有多個(gè)Modal時(shí)會(huì)使得數(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ù)請(qǐng)求方法的管理依然留在主頁(yè)面，代碼多起來(lái)后，依然顯得混亂。
<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ù)進(jìn)行完全封裝
最好的封裝是將數(shù)據(jù)請(qǐng)求與其他所有數(shù)據(jù)都進(jìn)行封裝。由父組件調(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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue不用window的方式如何刷新當(dāng)前頁(yè)面
這篇文章主要介紹了vue不用window的方式如何刷新當(dāng)前頁(yè)面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家介紹了vue全局?jǐn)?shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
uni-app項(xiàng)目中引入Vant?UI組件庫(kù)完美避坑指南（純凈版）
網(wǎng)上百度uniapp使用vant時(shí),很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實(shí)uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項(xiàng)目中引入Vant?UI組件庫(kù)完美避坑指南的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue實(shí)現(xiàn)返回頂部按鈕實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)返回頂部按鈕的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue項(xiàng)目中使用websocket的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中使用websocket的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue2與Vue3中Ref綁定元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
關(guān)于vite proxy跨域問(wèn)題的解決
這篇文章主要介紹了關(guān)于vite proxy跨域問(wèn)題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08