巧妙关闭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) 即可改变父组件的值。