element-ui el-dialog 封装问题 .sync的使用问题Avoid mutating a prop di

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible"

解决办法：

父组件

<demand-detail-dialog :visible.sync="detailDialogVisible" :demand-id="currentDemandId" />

子组件

<template>
  <el-dialog title="需求详情" :visible="dialogVisible" width="800px" :close-on-click-modal="false"
    @close="$emit('update:visible', false)">
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
      <el-button type="primary" @click="handlePrint" v-if="hasPrintPermission">打 印</el-button>
    </div>
  </el-dialog>

错误原因：

子组件 :visible 写成了 :visible.sync

深层原因：

visible.sync语法糖简单介绍

<child-dialog :visible.sync="visible"></child-dialog>
等同于
<child-dialog :visible="visible" @update:visible="val => visible = val"></child-dialog>

作者：朱通天
链接：juejin.cn/post/713043…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。