巧妙關閉iView的Modal框

前言

在使用 iView 的 Modal 框時，需要給 Modal 框傳遞一個變量，用於控制顯示與隱藏。然後，這個變量由父組件傳遞給子組件 Modal 框，每次都需要調用父組件的函數修改該變量的值，多調用了一個函數。問：只需父組件傳遞一個變量給 Modal 框，無需調用函數，就能顯示與隱藏 Modal 框。實現如下：

環境

• Vue 2.5.2
• iView 3.4.1
• less 3.9.0

在 Vue 中如何使用 less 做預處理器

常用方式

HelloWorld.vue

<template>
  <div class="content">
    <Button type="primary" @click="showModal = true">顯示對話框</Button>
    <TestModal v-model="showModal"/>
  </div>
</template>

<script>
import TestModal from './TestModal'
export default {
  components: {
    TestModal
  },
  data () {
    return {
      showModal: false
    }
  }
}
</script>

<style lang="less" scoped>
  .content{
    padding: 20px 60px;
  }
</style>

TestModal.vue

<template>
  <Modal
      v-model="modal1"
      title="Common Modal dialog box title"
      @on-ok="ok"
      @on-cancel="cancel">
      <p>Content of dialog</p>
      <p>Content of dialog</p>
      <p>Content of dialog</p>
  </Modal>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal1 = n
      },
      immediate: true
    },
    modal1 (n) {
      this.$emit('input', n)
    }
  },
  data () {
    return {
      modal1: false
    }
  },
  methods: {
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    }
  }
}
</script>

原理

在任意一個組件中使用 v-model 都會綁定該組件的 value屬性，即該組件會得到父組件傳遞的一個 value 值，若在組件內使用 this.$emit('input', val) ( val 是一個變量)，觸發了 input 事件，而 input 事件會改變組件的 value 值，相應的即 v-model 綁定的變量的值就會改變，故父組件綁定的 v-model 的變量就改變了。

總結

使用 v-model 綁定子組件，在子組件中使用 this.$emit('input', val) 即可改變父組件的值。