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)聽的方式來(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?require.context()的用法實(shí)例詳解
require.context是webpack提供的一個(gè)api,通常用于批量注冊(cè)組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作
這篇文章主要介紹了結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue預(yù)渲染：prerender-spa-plugin生成靜態(tài)HTML與vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的結(jié)合使用,提供了解決SEO問(wèn)題的方案,prerender-spa-plugin通過(guò)預(yù)渲染技術(shù)生成靜態(tài)HTML,而vue-meta-info則能動(dòng)態(tài)管理頁(yè)面元數(shù)據(jù),本文將探討如何使用這兩個(gè)工具優(yōu)化Vue.js項(xiàng)目的SEO表現(xiàn),包括安裝、配置及注意事項(xiàng)2024-10-10
聊聊vue集成sweetalert2提示組件的問(wèn)題
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問(wèn)題，本文通過(guò)項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
使用Vue實(shí)現(xiàn)網(wǎng)站SEO優(yōu)化的方法示例
在如今這個(gè)數(shù)字化和信息化的時(shí)代,搜索引擎優(yōu)化（SEO）已經(jīng)成為網(wǎng)站成功的關(guān)鍵因素之一,在使用現(xiàn)代化框架如Vue.js進(jìn)行開發(fā)時(shí),開發(fā)者通常關(guān)注的是構(gòu)建高效的單頁(yè)面應(yīng)用,本文將介紹如何使用Vue來(lái)優(yōu)化網(wǎng)站的SEO,并提供一些示例代碼幫助您實(shí)現(xiàn)這些優(yōu)化2024-11-11
vue之“} expected“和“at-rule or selector ex
這篇文章主要介紹了vue之“} expected“和“at-rule or selector expected“報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇vue加載完成后的回調(diào)函數(shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Antd form表單的使用、設(shè)值、取值、清空值方式
這篇文章主要介紹了Antd form表單的使用、設(shè)值、取值、清空值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-09-09
詳解vue computed的緩存實(shí)現(xiàn)原理
這篇文章主要介紹了vue computed的緩存實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04