https://segmentfault.com/a/1190000039060650

实现方式

//vModelDialog.js

  1. export default {
  2.   model: {
  3.     prop: 'visible',
  4.     event: 'change'
  5.   },
  6.   props: {
  7.     visible: {
  8.       type: Boolean,
  9.       default: () => {
  10.         return false;
  11.       }
  12.     }
  13.   },
  14.   computed: {
  15.     innerVisible: {
  16.       get: function () {
  17.         return this.visible;
  18.       },
  19.       set: function (val) {
  20.         this.$emit('change', val);
  21.       }
  22.     }
  23.   },
  24.   methods: {
  25.     handleDialogClose() {
  26.       this.$emit('change', false);
  27.     }
  28.   }
  29. };
  1. <!-- DetailDialog.vue -->
  2. <template>
  3.   <el-dialog title="标题" :visible.sync="innerVisible"  >
  4.     <div>弹窗内容</div>
  5.   </el-dialog>
  6. </template>
  8. import vModemodelDialoglDialog from './vModelDialog.js'
  9. export default {
  10.   mixins: [vModelDialog],
  11. }

使用：

  1. <DetailDialog v-model="detailVisible" />

自定义组件的v-model

https://cn.vuejs.org/v2/guide/components-custom-events.html