vue中modal傳輸資料並重新整理部分頁面資料方式

2022-04-08 13:00:35

modal傳輸資料重新整理部分頁面資料

在modal中傳入資料至頁面，並且頁面重新整理。

我在網上看到了 vue的幾種頁面傳值方式

下面展示一些內聯程式碼片

//$ router
this.$router.push({ query: { ids: record.id } })

這種方式會重新整理整個頁面

// router-link
<router-link :to="{ name: 'jeecg-ChildStatistics',query:{ids:record.id} } ">

這種屬於一個頁面跳轉到另一個頁面並傳值，於是使用後還要去關閉modal並手動重新整理才能看到穿過去的引數

後面在網上找到了監聽的方式來實現

下面展示一些內聯程式碼片。

// A code block
var foo = 'bar';

// An highlighted block
 methods:{
      fetchData(){
           console.log('路由傳送變化doing...');
     }
  },
  created() {
        var self = this;
        self.fetchData();
  },
  watch:{
      '$route':'fetchData'
  },

vue中modal資料管理

在編寫頁面時經常會使用各元件庫的Modal元件。一般Modal元件管理的資料非常多，通常一個頁面中有多個Modal，如果不將各個Modal封裝成元件的話，資料堆砌在主頁面將使得程式碼難以閱讀。但是封裝也是一門學問。

完全不封裝的Modal程式碼範例

當在主頁面管理編寫Modal及管理資料時，當有多個Modal時會使得資料繁雜混亂，難以閱讀。

<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及其資料封裝成元件

如下封裝雖好，但是modal1、modal2，data1，data5以及資料請求方法的管理依然留在主頁面，程式碼多起來後，依然顯得混亂。

<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資料進行完全封裝

最好的封裝是將資料請求與其他所有資料都進行封裝。由父元件呼叫子元件的方法。

<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>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。