vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式
更新時間：2022年04月08日 10:43:58 作者：搬磚小生
這篇文章主要介紹了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ù)堆砌在主頁面將使得代碼難以閱讀。但是封裝也是一門學問。
完全不封裝的Modal代碼示例
當在主頁面管理編寫Modal及管理數(shù)據(jù)時，當有多個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)文章
這篇文章主要介紹了vue不用window的方式如何刷新當前頁面,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家介紹了vue全局數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
uni-app項目中引入Vant?UI組件庫完美避坑指南（純凈版）
網(wǎng)上百度uniapp使用vant時,很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項目中引入Vant?UI組件庫完美避坑指南的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)返回頂部按鈕的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
本文主要介紹了vue項目中使用websocket的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue2與Vue3中Ref綁定元素方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實現(xiàn)方法
這篇文章主要介紹了Vue自定義指令結(jié)合阿里云OSS優(yōu)化圖片的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08