vue为什么我这里报单向数据流的报错

Question

我子组件取消它报错

// 父组件

 <div>
    <transfer-modal 
    :visible="transferVisible" 
    @handleOk="handleTransfer" 
    @handleCancel="transferVisible = false"></transfer-modal>
 </div>
 
 // js
 data() {
      return {
        loading: false,
        transferVisible: false
      }
    },

// 子组件

  <template>
  <div class="transfer-modal">
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk" @cancel="handleCancel">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>

<script>
  // import { getAuthInfo } from '@/api/member'
  export default {
    name: 'Transfermodal',
    props: {
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        form: {
          status: 2,
          reason: ''
        }
      }
    },
    methods: {
      // 处理取消
      handleCancel() {
        this.$emit('handleCancel')
      },
      // 处理确定按钮
      handleOk() {
        console.log()
      }
    }
  }
</script>

Answer 1

v-model="visible"改动了父组件传递过来的props造成的,子组件里，你这样试试

 v-model="visibleValue"
 
 data() {
      return {
        loading: false,
        visibleValue:this.visible,
        form: {
          status: 2,
          reason: ''
        }
      }