vue中Modal數(shù)據(jù)管理

在編寫(xiě)頁(yè)面時(shí)經(jīng)常會(huì)使用各組件庫(kù)的Modal組件蜈首。一般Modal組件管理的數(shù)據(jù)非常多者娱,通常一個(gè)頁(yè)面中有多個(gè)Modal,如果不將各個(gè)Modal封裝成組件的話秽荤,數(shù)據(jù)堆砌在主頁(yè)面將使得代碼難以閱讀甜奄。但是封裝也是一門(mén)學(xué)問(wèn)柠横。

完全不封裝的Modal代碼示例

當(dāng)在主頁(yè)面管理編寫(xiě)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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末驻谆,一起剝皮案震驚了整個(gè)濱河市卵凑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌胜臊,老刑警劉巖勺卢,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異象对,居然都是意外死亡黑忱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)勒魔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)甫煞,“玉大人,你說(shuō)我怎么就攤上這事冠绢「Х停” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵弟胀,是天一觀的道長(zhǎng)楷力。 經(jīng)常有香客問(wèn)我,道長(zhǎng)孵户,這世上最難降的妖魔是什么萧朝? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮延届,結(jié)果婚禮上剪勿,老公的妹妹穿的比我還像新娘。我一直安慰自己方庭,他們只是感情好厕吉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著械念,像睡著了一般头朱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上龄减,一...
    開(kāi)封第一講書(shū)人閱讀 51,190評(píng)論 1 299
  • 那天项钮,我揣著相機(jī)與錄音,去河邊找鬼希停。 笑死烁巫,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的宠能。 我是一名探鬼主播亚隙,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼违崇!你這毒婦竟也來(lái)了阿弃?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤羞延,失蹤者是張志新(化名)和其女友劉穎渣淳,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體伴箩,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡入愧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了嗤谚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片砂客。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖呵恢,靈堂內(nèi)的尸體忽然破棺而出鞠值,到底是詐尸還是另有隱情,我是刑警寧澤渗钉,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布彤恶,位于F島的核電站,受9級(jí)特大地震影響鳄橘,放射性物質(zhì)發(fā)生泄漏声离。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一瘫怜、第九天 我趴在偏房一處隱蔽的房頂上張望术徊。 院中可真熱鬧,春花似錦鲸湃、人聲如沸赠涮。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)笋除。三九已至斜友,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間垃它,已是汗流浹背鲜屏。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留国拇,地道東北人洛史。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像酱吝,于是被迫代替她去往敵國(guó)和親也殖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容