vue2+ts-vue-property-decorator中封装组件实现双向绑定

vue2+ts-vue-property-decorator中封装组件实现双向绑定

子组件：

<template>
  <a-modal v-model="visible" title="Basic Modal" :footer="null" @cancel="cancel" >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<script lang="ts">
import abpbase from 'geofly-framework-web-common/libs/abpbase';
import {
  Component, Emit, Model, Prop, Watch,
} from 'vue-property-decorator';

@Component({
  name: 'InspectDetailModal',
  components: {},
})
export default class InspectDetailModal extends abpbase {
  @Model('change', {
    type: Boolean,
    default: false,
  })
  value;

  visible = false;

  cancel() {
    this.visible = false;
    this.emitData();
  }

  @Emit('change')
  emitData() {
    return this.visible;
  }

  /**
   * 相应外部数据变化,更新内部状态
   * @param val
   */
  @Watch("value", { deep: true })
  onValueChange(val) {
    this.visible = val;
  }
}
</script>

<style lang="less" scoped>
.home-wrap {
  min-width: 1280px;
  overflow: auto;
}
</style>

父组件使用：

<!-- 详情弹窗 -->
<inspectDetailModal v-model="detailData.detaiModalVisible"/>

就这样就双向绑定啦！